Tailwind amber color palette
amber-50 to amber-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. amber-500 is #FD9A00 in v4 and #F59E0B in v3.
Every amber shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| amber-50 | bg-amber-50 | oklch(98.7% 0.022 95.277) | #FFFBEB | #FFFBEB | Floral White #FFFAF0 |
| amber-100 | bg-amber-100 | oklch(96.2% 0.059 95.617) | #FEF3C6 | #FEF3C7 | Pale #FFF9D0 |
| amber-200 | bg-amber-200 | oklch(92.4% 0.12 95.746) | #FEE685 | #FDE68A | Khaki #F0E68C |
| amber-300 | bg-amber-300 | oklch(87.9% 0.169 91.605) | #FFD230 | #FCD34D | Gold #FFD700 |
| amber-400 | bg-amber-400 | oklch(82.8% 0.189 84.429) | #FFBA00 | #FBBF24 | Orangey Yellow #FDB915 |
| amber-500 | bg-amber-500 | oklch(76.9% 0.188 70.08) | #FD9A00 | #F59E0B | Tangerine #FF9408 |
| amber-600 | bg-amber-600 | oklch(66.6% 0.179 58.318) | #E17100 | #D97706 | Pumpkin #E17701 |
| amber-700 | bg-amber-700 | oklch(55.5% 0.163 48.998) | #BB4D00 | #B45309 | Burnt Orange #C04E01 |
| amber-800 | bg-amber-800 | oklch(47.3% 0.137 46.201) | #973C00 | #92400E | Russet #A13905 |
| amber-900 | bg-amber-900 | oklch(41.4% 0.112 45.904) | #7B3306 | #78350F | Chestnut #742802 |
| amber-950 | bg-amber-950 | oklch(27.9% 0.077 45.635) | #461901 | #451A03 | Chocolate Brown #411900 |
amber contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, amber shades 700, 800, 900, 950 pass; on black, amber shades 50, 100, 200, 300, 400, 500, 600 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| amber-50 | #FFFBEB | 1.03:1 Fail | 20.25:1 AA |
| amber-100 | #FEF3C6 | 1.11:1 Fail | 18.84:1 AA |
| amber-200 | #FEE685 | 1.24:1 Fail | 16.87:1 AA |
| amber-300 | #FFD230 | 1.44:1 Fail | 14.51:1 AA |
| amber-400 | #FFBA00 | 1.71:1 Fail | 12.27:1 AA |
| amber-500 | #FD9A00 | 2.14:1 Fail | 9.79:1 AA |
| amber-600 | #E17100 | 3.19:1 AA large | 6.56:1 AA |
| amber-700 | #BB4D00 | 5.03:1 AA | 4.17:1 AA large |
| amber-800 | #973C00 | 7.08:1 AA | 2.96:1 Fail |
| amber-900 | #7B3306 | 9.05:1 AA | 2.31:1 Fail |
| amber-950 | #461901 | 15.00:1 AA | 1.39:1 Fail |
Use amber in your project
Utility class: bg-amber-500. CSS variable: var(--color-amber-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-amber-50: oklch(98.7% 0.022 95.277);
--color-amber-100: oklch(96.2% 0.059 95.617);
--color-amber-200: oklch(92.4% 0.12 95.746);
--color-amber-300: oklch(87.9% 0.169 91.605);
--color-amber-400: oklch(82.8% 0.189 84.429);
--color-amber-500: oklch(76.9% 0.188 70.08);
--color-amber-600: oklch(66.6% 0.179 58.318);
--color-amber-700: oklch(55.5% 0.163 48.998);
--color-amber-800: oklch(47.3% 0.137 46.201);
--color-amber-900: oklch(41.4% 0.112 45.904);
--color-amber-950: oklch(27.9% 0.077 45.635);
}
More Tailwind colors
Previous: orange | Next: yellow
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #FD9A00 and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.