Sapphire

Precious and enduring — sapphire carries the depth of trust and the brilliance of gemstones.

Shades 11

Base #0f52ba

RGB 15, 82, 186

100

200

300

400

500

600

700

800

All Sapphire Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --sapphire-50: #f0f4ff;
  --sapphire-100: #dce7ff;
  --sapphire-200: #b8ccff;
  --sapphire-300: #84a8ff;
  --sapphire-400: #4876f0;
  --sapphire-500: #0f52ba;
  --sapphire-600: #0c3f96;
  --sapphire-700: #092e72;
  --sapphire-800: #062050;
  --sapphire-900: #031231;
  --sapphire-950: #020918;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        sapphire: {
          50: '#f0f4ff',
          100: '#dce7ff',
          200: '#b8ccff',
          300: '#84a8ff',
          400: '#4876f0',
          500: '#0f52ba',
          600: '#0c3f96',
          700: '#092e72',
          800: '#062050',
          900: '#031231',
          950: '#020918',
        },
      },
    },
  },
};

SCSS Map

$sapphire-palette: (
  50: #f0f4ff,
  100: #dce7ff,
  200: #b8ccff,
  300: #84a8ff,
  400: #4876f0,
  500: #0f52ba,
  600: #0c3f96,
  700: #092e72,
  800: #062050,
  900: #031231,
  950: #020918,
);