Orange
#DD9F03
OrangeColor Codes
All color formats for development
HEX
#DD9F03RGB
rgb(221, 159, 3)HSL
hsl(43, 97%, 44%)OKLCH
oklch(0.743 0.153 80.4)CMYK
cmyk(0%, 28%, 99%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C78F03
2#B17F03
3#9B7002
4#856002
5#6F5002
6#584001
7#423001
8#2C2001
9#161000
Tints
Lighter variations
1#F9B404
2#FCBD1E
3#FCC53A
4#FCCD56
5#FDD672
6#FDDE8E
7#FEE6AB
8#FEEEC7
9#FFF7E3
Tones
Muted variations
1#D29B0E
2#C79619
3#BC9124
4#B28C2F
5#A7883A
6#9C8345
7#917E50
8#867A5A
9#7B7565
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFB #FFFBF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEF5 #FEF5DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEEC #FEECBE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDDD #FDDD8B | BordersInactive statesPlaceholder text |
| 400 | FCCB #FCCB4F | Disabled statesSecondary iconsMuted text |
| 500 | FCBC #FCBC1D | Primary brand colorCTAsActive elementsLinks |
| 600 | DD9F #DD9F03 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B07F #B07F03 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E5B #7E5B02 | Text on light backgroundsHeadingsStrong borders |
| 900 | 503A #503A01 | Primary textHigh emphasis contentDark headings |
| 950 | 3224 #322401 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orange-50: #FFFBF0;
--orange-100: #FEF5DC;
--orange-200: #FEECBE;
--orange-300: #FDDD8B;
--orange-400: #FCCB4F;
--orange-500: #FCBC1D;
--orange-600: #DD9F03;
--orange-700: #B07F03;
--orange-800: #7E5B02;
--orange-900: #503A01;
--orange-950: #322401;
}