Orange
#DCBC04
YellowColor Codes
All color formats for development
HEX
#DCBC04RGB
rgb(220, 188, 4)HSL
hsl(51, 96%, 44%)OKLCH
oklch(0.799 0.164 96.6)CMYK
cmyk(0%, 15%, 98%, 14%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C6A904
2#B09604
3#9A8303
4#847103
5#6E5E02
6#584B02
7#423801
8#2C2601
9#161300
Tints
Lighter variations
1#F8D305
2#FADA1F
3#FBDE3B
4#FCE357
5#FCE873
6#FDEC8F
7#FDF1AB
8#FEF6C7
9#FEFAE3
Tones
Muted variations
1#D1B40F
2#C6AD1A
3#BCA525
4#B19D30
5#A6963A
6#9B8E45
7#918750
8#867F5B
9#7B7865
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFC #FFFCF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEF9 #FEF9DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEF4 #FEF4BE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDEC #FDEC8C | BordersInactive statesPlaceholder text |
| 400 | FBE2 #FBE250 | Disabled statesSecondary iconsMuted text |
| 500 | FAD9 #FAD91E | Primary brand colorCTAsActive elementsLinks |
| 600 | DCBC #DCBC04 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AF95 #AF9504 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7D6B #7D6B03 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5044 #504402 | Primary textHigh emphasis contentDark headings |
| 950 | 322B #322B01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orange-50: #FFFCF0;
--orange-100: #FEF9DC;
--orange-200: #FEF4BE;
--orange-300: #FDEC8C;
--orange-400: #FBE250;
--orange-500: #FAD91E;
--orange-600: #DCBC04;
--orange-700: #AF9504;
--orange-800: #7D6B03;
--orange-900: #504402;
--orange-950: #322B01;
}