White

Purity, clarity, and simplicity — white creates space for everything else.

Shades 11

Base #ffffff

RGB 255, 255, 255

100

200

300

400

500

600

700

800

All White Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --white-50: #ffffff;
  --white-100: #fcfcfc;
  --white-200: #fafafa;
  --white-300: #f8f8f8;
  --white-400: #f5f5f5;
  --white-500: #f2f2f2;
  --white-600: #ededed;
  --white-700: #e5e5e5;
  --white-800: #dddddd;
  --white-900: #d4d4d4;
  --white-950: #cccccc;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        white: {
          50: '#ffffff',
          100: '#fcfcfc',
          200: '#fafafa',
          300: '#f8f8f8',
          400: '#f5f5f5',
          500: '#f2f2f2',
          600: '#ededed',
          700: '#e5e5e5',
          800: '#dddddd',
          900: '#d4d4d4',
          950: '#cccccc',
        },
      },
    },
  },
};

SCSS Map

$white-palette: (
  50: #ffffff,
  100: #fcfcfc,
  200: #fafafa,
  300: #f8f8f8,
  400: #f5f5f5,
  500: #f2f2f2,
  600: #ededed,
  700: #e5e5e5,
  800: #dddddd,
  900: #d4d4d4,
  950: #cccccc,
);