Amber Warning
Warning & AmberHigh-luminance amber warning scale with zero perceptual muddying, meeting strict WCAG contrast against dark backgrounds.
About the Amber Warning palette
High-luminance amber warning scale with zero perceptual muddying, meeting strict WCAG contrast against dark backgrounds. The scale is anchored at hue 75 in OKLCH, so every step keeps the same hue while lightness moves in perceptually even steps from 50 to 950. The 500 step (#946407) is your base color. Shades 500-950 pass WCAG 2.1 AA against white and shades 50, 100, 200, 300, 400 pass against black, so use the light end for backgrounds and the dark end for text on light surfaces (or vice versa). Each value is copy-ready as oklch(), HEX, RGB or HSL.
11 colors · click a card to copy
cart writes to --color-amber-warning-*
Shade Step Breakdown (50 to 950)
| Swatch | Shade Step | OKLCH CSS Value | sRGB Fallback | RGB | HSL | WCAG on Black | WCAG on White | Gamut |
|---|---|---|---|---|---|---|---|---|
| 50 | oklch(97.0% 0.024 75.0) | #fff3e4 | rgb(255, 243, 228) | hsl(34.12, 98.37%, 94.7%) | 19.19:1 | 1.09:1 | sRGB | |
| 100 | oklch(93.0% 0.056 75.0) | #ffe3bf | rgb(255, 227, 191) | hsl(34.33, 98.56%, 87.34%) | 16.99:1 | 1.24:1 | sRGB | |
| 200 | oklch(86.0% 0.117 75.0) | #fec675 | rgb(254, 198, 117) | hsl(35.3, 98.71%, 72.85%) | 13.55:1 | 1.55:1 | sRGB | |
| 300 | oklch(72.0% 0.180 75.0) | #db9400 | rgb(219, 148, 0) | hsl(40.61, 99.91%, 42.97%) | 8.25:1 | 2.55:1 | sRGB | |
| 400 | oklch(64.0% 0.132 75.0) | #ba7e0c | rgb(186, 126, 12) | hsl(39.4, 87.8%, 38.89%) | 6.08:1 | 3.46:1 | sRGB | |
| 500 | oklch(54.0% 0.112 75.0) | #946407 | rgb(148, 100, 7) | hsl(39.36, 90.43%, 30.46%) | 4.09:1 | 5.14:1 | sRGB | |
| 600 | oklch(45.0% 0.093 75.0) | #734c04 | rgb(115, 76, 4) | hsl(39.13, 92.78%, 23.38%) | 2.76:1 | 7.6:1 | sRGB | |
| 700 | oklch(37.0% 0.076 75.0) | #573902 | rgb(87, 57, 2) | hsl(38.62, 94.76%, 17.51%) | 1.99:1 | 10.55:1 | sRGB | |
| 800 | oklch(28.0% 0.058 75.0) | #392401 | rgb(57, 36, 1) | hsl(37.3, 96.54%, 11.42%) | 1.43:1 | 14.72:1 | sRGB | |
| 900 | oklch(20.0% 0.041 75.0) | #211300 | rgb(33, 19, 0) | hsl(34.14, 97.63%, 6.5%) | 1.16:1 | 18.14:1 | sRGB | |
| 950 | oklch(13.0% 0.027 75.0) | #0d0600 | rgb(13, 6, 0) | hsl(25.96, 98.54%, 2.63%) | 1.04:1 | 20.13:1 | sRGB |
Tailwind v4 @theme Snippet for Amber Warning
Copy into global.css
@theme {
--color-amber-warning-50: oklch(97.0% 0.024 75.0);
--color-amber-warning-100: oklch(93.0% 0.056 75.0);
--color-amber-warning-200: oklch(86.0% 0.117 75.0);
--color-amber-warning-300: oklch(72.0% 0.180 75.0);
--color-amber-warning-400: oklch(64.0% 0.132 75.0);
--color-amber-warning-500: oklch(54.0% 0.112 75.0);
--color-amber-warning-600: oklch(45.0% 0.093 75.0);
--color-amber-warning-700: oklch(37.0% 0.076 75.0);
--color-amber-warning-800: oklch(28.0% 0.058 75.0);
--color-amber-warning-900: oklch(20.0% 0.041 75.0);
--color-amber-warning-950: oklch(13.0% 0.027 75.0);
}Convert Amber Warning shades
Working with these shades in another format? Use the matching converter — the same values you see above, converted instantly with live gamut detection.