Saffron

Exotic spice and celebration — saffron carries cultural richness and festive energy.

Shades 11

Base #f4a900

RGB 244, 169, 0

100

200

300

400

500

600

700

800

All Saffron Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --saffron-50: #fffbeb;
  --saffron-100: #fff1c2;
  --saffron-200: #ffe485;
  --saffron-300: #ffd147;
  --saffron-400: #ffbc0f;
  --saffron-500: #f4a900;
  --saffron-600: #cc8a00;
  --saffron-700: #9e6900;
  --saffron-800: #744c00;
  --saffron-900: #4a3000;
  --saffron-950: #251800;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        saffron: {
          50: '#fffbeb',
          100: '#fff1c2',
          200: '#ffe485',
          300: '#ffd147',
          400: '#ffbc0f',
          500: '#f4a900',
          600: '#cc8a00',
          700: '#9e6900',
          800: '#744c00',
          900: '#4a3000',
          950: '#251800',
        },
      },
    },
  },
};

SCSS Map

$saffron-palette: (
  50: #fffbeb,
  100: #fff1c2,
  200: #ffe485,
  300: #ffd147,
  400: #ffbc0f,
  500: #f4a900,
  600: #cc8a00,
  700: #9e6900,
  800: #744c00,
  900: #4a3000,
  950: #251800,
);