Cerulean

Clear skies and infinite possibility — cerulean radiates calm confidence.

Shades 11

Base #007ba7

RGB 0, 123, 167

100

200

300

400

500

600

700

800

All Cerulean Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --cerulean-50: #f0f9fc;
  --cerulean-100: #d6eef7;
  --cerulean-200: #aadbee;
  --cerulean-300: #72c1e1;
  --cerulean-400: #38a3c8;
  --cerulean-500: #007ba7;
  --cerulean-600: #006189;
  --cerulean-700: #004a69;
  --cerulean-800: #00344b;
  --cerulean-900: #001e2e;
  --cerulean-950: #000f17;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        cerulean: {
          50: '#f0f9fc',
          100: '#d6eef7',
          200: '#aadbee',
          300: '#72c1e1',
          400: '#38a3c8',
          500: '#007ba7',
          600: '#006189',
          700: '#004a69',
          800: '#00344b',
          900: '#001e2e',
          950: '#000f17',
        },
      },
    },
  },
};

SCSS Map

$cerulean-palette: (
  50: #f0f9fc,
  100: #d6eef7,
  200: #aadbee,
  300: #72c1e1,
  400: #38a3c8,
  500: #007ba7,
  600: #006189,
  700: #004a69,
  800: #00344b,
  900: #001e2e,
  950: #000f17,
);