Azure

Boundless and free — azure evokes cloudless skies and digital horizons.

Shades 11

Base #f0ffff

RGB 240, 255, 255

100

200

300

400

500

600

700

800

All Azure Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --azure-50: #f8ffff;
  --azure-100: #f0ffff;
  --azure-200: #c8f0f8;
  --azure-300: #96d8ee;
  --azure-400: #58bade;
  --azure-500: #1a96c8;
  --azure-600: #1278a4;
  --azure-700: #0d5c7d;
  --azure-800: #084259;
  --azure-900: #042636;
  --azure-950: #02131b;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        azure: {
          50: '#f8ffff',
          100: '#f0ffff',
          200: '#c8f0f8',
          300: '#96d8ee',
          400: '#58bade',
          500: '#1a96c8',
          600: '#1278a4',
          700: '#0d5c7d',
          800: '#084259',
          900: '#042636',
          950: '#02131b',
        },
      },
    },
  },
};

SCSS Map

$azure-palette: (
  50: #f8ffff,
  100: #f0ffff,
  200: #c8f0f8,
  300: #96d8ee,
  400: #58bade,
  500: #1a96c8,
  600: #1278a4,
  700: #0d5c7d,
  800: #084259,
  900: #042636,
  950: #02131b,
);