Orange
#EAB82E
OrangeColor Codes
All color formats for development
HEX
#EAB82ERGB
rgb(234, 184, 46)HSL
hsl(44, 82%, 55%)OKLCH
oklch(0.806 0.153 87)CMYK
cmyk(0%, 21%, 80%, 8%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E6AF17
2#CC9B14
3#B38812
4#99740F
5#80610D
6#664E0A
7#4D3A08
8#332705
9#1A1303
Tints
Lighter variations
1#ECBF43
2#EEC658
3#F1CD6D
4#F3D482
5#F5DC97
6#F7E3AB
7#F9EAC0
8#FBF1D5
9#FDF8EA
Tones
Muted variations
1#E1B438
2#D8AF41
3#CEAB4A
4#C5A754
5#BBA25D
6#B29E67
7#A89970
8#9F9579
9#969183
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEFA #FEFAF1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FCF4 #FCF4DF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F9EB #F9EBC3 | Secondary backgroundsInput backgroundsDividers |
| 300 | F4DB #F4DB94 | BordersInactive statesPlaceholder text |
| 400 | EFC8 #EFC85D | Disabled statesSecondary iconsMuted text |
| 500 | EAB8 #EAB82E | Primary brand colorCTAsActive elementsLinks |
| 600 | CC9B #CC9B14 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A27B #A27B10 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7458 #74580B | Text on light backgroundsHeadingsStrong borders |
| 900 | 4A38 #4A3807 | Primary textHigh emphasis contentDark headings |
| 950 | 2E23 #2E2305 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orange-50: #FEFAF1;
--orange-100: #FCF4DF;
--orange-200: #F9EBC3;
--orange-300: #F4DB94;
--orange-400: #EFC85D;
--orange-500: #EAB82E;
--orange-600: #CC9B14;
--orange-700: #A27B10;
--orange-800: #74580B;
--orange-900: #4A3807;
--orange-950: #2E2305;
}