Orange
#FAAA1E
OrangeColor Codes
All color formats for development
HEX
#FAAA1ERGB
rgb(250, 170, 30)HSL
hsl(38, 96%, 55%)OKLCH
oklch(0.796 0.163 73.8)CMYK
cmyk(0%, 32%, 88%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F79F05
2#DC8D04
3#C07B04
4#A56A03
5#895803
6#6E4602
7#523502
8#372301
9#1B1201
Tints
Lighter variations
1#FBB235
2#FBBB4B
3#FCC362
4#FCCC78
5#FDD48F
6#FDDDA5
7#FEE5BC
8#FEEED2
9#FFF6E9
Tones
Muted variations
1#EFA729
2#E4A434
3#D9A13F
4#CE9E4A
5#C39B55
6#B89860
7#AD956B
8#A29276
9#978F81
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF9 #FFF9F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEF2 #FEF2DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEE6 #FEE6BE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDD3 #FDD38C | BordersInactive statesPlaceholder text |
| 400 | FBBD #FBBD50 | Disabled statesSecondary iconsMuted text |
| 500 | FAAA #FAAA1E | Primary brand colorCTAsActive elementsLinks |
| 600 | DC8D #DC8D04 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AF70 #AF7004 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7D50 #7D5003 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5033 #503302 | Primary textHigh emphasis contentDark headings |
| 950 | 3220 #322001 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orange-50: #FFF9F0;
--orange-100: #FEF2DC;
--orange-200: #FEE6BE;
--orange-300: #FDD38C;
--orange-400: #FBBD50;
--orange-500: #FAAA1E;
--orange-600: #DC8D04;
--orange-700: #AF7004;
--orange-800: #7D5003;
--orange-900: #503302;
--orange-950: #322001;
}