Ice Blue

Crystalline and ethereal — ice blue evokes frozen tundras, glaciers, and the silence of deep winter.

Shades 11

Base #d6ecf0

RGB 214, 236, 240

100

200

300

400

500

600

700

800

All Ice Blue Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --ice-blue-50: #f8fdfe;
  --ice-blue-100: #edf8fb;
  --ice-blue-200: #d6ecf0;
  --ice-blue-300: #b2d8e2;
  --ice-blue-400: #82bfce;
  --ice-blue-500: #52a1b5;
  --ice-blue-600: #3c8194;
  --ice-blue-700: #2d6170;
  --ice-blue-800: #1f434e;
  --ice-blue-900: #12272e;
  --ice-blue-950: #091317;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        ice-blue: {
          50: '#f8fdfe',
          100: '#edf8fb',
          200: '#d6ecf0',
          300: '#b2d8e2',
          400: '#82bfce',
          500: '#52a1b5',
          600: '#3c8194',
          700: '#2d6170',
          800: '#1f434e',
          900: '#12272e',
          950: '#091317',
        },
      },
    },
  },
};

SCSS Map

$ice-blue-palette: (
  50: #f8fdfe,
  100: #edf8fb,
  200: #d6ecf0,
  300: #b2d8e2,
  400: #82bfce,
  500: #52a1b5,
  600: #3c8194,
  700: #2d6170,
  800: #1f434e,
  900: #12272e,
  950: #091317,
);