Powder Blue

Soft and airy — powder blue carries the gentle calm of winter skies and quiet mornings.

Shades 11

Base #b0c4de

RGB 176, 196, 222

100

200

300

400

500

600

700

800

All Powder Blue Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --powder-blue-50: #f5f8fd;
  --powder-blue-100: #e8eef8;
  --powder-blue-200: #d0dff2;
  --powder-blue-300: #b0c4de;
  --powder-blue-400: #8daac9;
  --powder-blue-500: #6a8eb4;
  --powder-blue-600: #4e729a;
  --powder-blue-700: #3b5778;
  --powder-blue-800: #283d55;
  --powder-blue-900: #182433;
  --powder-blue-950: #0c121a;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        powder-blue: {
          50: '#f5f8fd',
          100: '#e8eef8',
          200: '#d0dff2',
          300: '#b0c4de',
          400: '#8daac9',
          500: '#6a8eb4',
          600: '#4e729a',
          700: '#3b5778',
          800: '#283d55',
          900: '#182433',
          950: '#0c121a',
        },
      },
    },
  },
};

SCSS Map

$powder-blue-palette: (
  50: #f5f8fd,
  100: #e8eef8,
  200: #d0dff2,
  300: #b0c4de,
  400: #8daac9,
  500: #6a8eb4,
  600: #4e729a,
  700: #3b5778,
  800: #283d55,
  900: #182433,
  950: #0c121a,
);