Chocolate
#AF6A04
OrangeColor Codes
All color formats for development
HEX
#AF6A04RGB
rgb(175, 106, 4)HSL
hsl(36, 96%, 35%)OKLCH
oklch(0.587 0.129 66.1)CMYK
cmyk(0%, 39%, 98%, 31%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#9D6003
2#8C5503
3#7A4A02
4#694002
5#573502
6#462B01
7#342001
8#231501
9#110B00
Tints
Lighter variations
1#CF7E04
2#F09205
3#FAA11C
4#FBAF3C
5#FCBC5D
6#FCC97D
7#FDD79E
8#FEE4BE
9#FEF2DF
Tones
Muted variations
1#A6690C
2#9E6715
3#95651D
4#8D6426
5#84622E
6#7C6037
7#735E40
8#6A5D48
9#625B51
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF9 #FFF9F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEF1 #FEF1DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEE4 #FEE4BE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDD0 #FDD08C | BordersInactive statesPlaceholder text |
| 400 | FBB7 #FBB750 | Disabled statesSecondary iconsMuted text |
| 500 | FAA2 #FAA21E | Primary brand colorCTAsActive elementsLinks |
| 600 | DC86 #DC8604 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AF6A #AF6A04 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7D4C #7D4C03 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5031 #503102 | Primary textHigh emphasis contentDark headings |
| 950 | 321E #321E01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--chocolate-50: #FFF9F0;
--chocolate-100: #FEF1DC;
--chocolate-200: #FEE4BE;
--chocolate-300: #FDD08C;
--chocolate-400: #FBB750;
--chocolate-500: #FAA21E;
--chocolate-600: #DC8604;
--chocolate-700: #AF6A04;
--chocolate-800: #7D4C03;
--chocolate-900: #503102;
--chocolate-950: #321E01;
}