Cobalt

Vivid and resolute — cobalt is the blue of fine china, deep oceans, and bold vision.

Shades 11

Base #0047ab

RGB 0, 71, 171

100

200

300

400

500

600

700

800

All Cobalt Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --cobalt-50: #f0f5ff;
  --cobalt-100: #dce8ff;
  --cobalt-200: #b8d0ff;
  --cobalt-300: #85b0ff;
  --cobalt-400: #4a84ff;
  --cobalt-500: #0047ab;
  --cobalt-600: #003a8c;
  --cobalt-700: #002c6b;
  --cobalt-800: #001e4d;
  --cobalt-900: #00112f;
  --cobalt-950: #000917;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        cobalt: {
          50: '#f0f5ff',
          100: '#dce8ff',
          200: '#b8d0ff',
          300: '#85b0ff',
          400: '#4a84ff',
          500: '#0047ab',
          600: '#003a8c',
          700: '#002c6b',
          800: '#001e4d',
          900: '#00112f',
          950: '#000917',
        },
      },
    },
  },
};

SCSS Map

$cobalt-palette: (
  50: #f0f5ff,
  100: #dce8ff,
  200: #b8d0ff,
  300: #85b0ff,
  400: #4a84ff,
  500: #0047ab,
  600: #003a8c,
  700: #002c6b,
  800: #001e4d,
  900: #00112f,
  950: #000917,
);