Orange
#EFB42A
OrangeColor Codes
All color formats for development
HEX
#EFB42ARGB
rgb(239, 180, 42)HSL
hsl(42, 86%, 55%)OKLCH
oklch(0.803 0.155 82.9)CMYK
cmyk(0%, 25%, 82%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#EBAA12
2#D19710
3#B7840E
4#9D710C
5#825E0A
6#684B08
7#4E3906
8#342604
9#1A1302
Tints
Lighter variations
1#F1BB3F
2#F2C354
3#F4CA6A
4#F5D27F
5#F7D994
6#F9E1AA
7#FAE8BF
8#FCF0D4
9#FDF7EA
Tones
Muted variations
1#E5B033
2#DBAC3D
3#D1A847
4#C7A451
5#BEA05B
6#B49C65
7#AA986F
8#A09479
9#969082
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEFA #FEFAF1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDF3 #FDF3DE | Light backgroundsTable row hoverSkeleton loading |
| 200 | FAE9 #FAE9C1 | Secondary backgroundsInput backgroundsDividers |
| 300 | F7D9 #F7D992 | BordersInactive statesPlaceholder text |
| 400 | F3C4 #F3C459 | Disabled statesSecondary iconsMuted text |
| 500 | EFB4 #EFB42A | Primary brand colorCTAsActive elementsLinks |
| 600 | D197 #D19710 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A678 #A6780C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7756 #775609 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4C37 #4C3706 | Primary textHigh emphasis contentDark headings |
| 950 | 2F22 #2F2204 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orange-50: #FEFAF1;
--orange-100: #FDF3DE;
--orange-200: #FAE9C1;
--orange-300: #F7D992;
--orange-400: #F3C459;
--orange-500: #EFB42A;
--orange-600: #D19710;
--orange-700: #A6780C;
--orange-800: #775609;
--orange-900: #4C3706;
--orange-950: #2F2204;
}