Amber

Golden warmth and richness — amber glows with timeless elegance.

Shades 11

Base #f59e0b

RGB 245, 158, 11

100

200

300

400

500

600

700

800

All Amber Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;
  --amber-950: #451a03;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        amber: {
          50: '#fffbeb',
          100: '#fef3c7',
          200: '#fde68a',
          300: '#fcd34d',
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
          700: '#b45309',
          800: '#92400e',
          900: '#78350f',
          950: '#451a03',
        },
      },
    },
  },
};

SCSS Map

$amber-palette: (
  50: #fffbeb,
  100: #fef3c7,
  200: #fde68a,
  300: #fcd34d,
  400: #fbbf24,
  500: #f59e0b,
  600: #d97706,
  700: #b45309,
  800: #92400e,
  900: #78350f,
  950: #451a03,
);