Yellow

Joy, optimism, and clarity — yellow illuminates any palette.

Shades 11

Base #eab308

RGB 234, 179, 8

100

200

300

400

500

600

700

800

All Yellow Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --yellow-950: #422006;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        yellow: {
          50: '#fefce8',
          100: '#fef9c3',
          200: '#fef08a',
          300: '#fde047',
          400: '#facc15',
          500: '#eab308',
          600: '#ca8a04',
          700: '#a16207',
          800: '#854d0e',
          900: '#713f12',
          950: '#422006',
        },
      },
    },
  },
};

SCSS Map

$yellow-palette: (
  50: #fefce8,
  100: #fef9c3,
  200: #fef08a,
  300: #fde047,
  400: #facc15,
  500: #eab308,
  600: #ca8a04,
  700: #a16207,
  800: #854d0e,
  900: #713f12,
  950: #422006,
);