Dark Orange
#DD9803
OrangeColor Codes
All color formats for development
HEX
#DD9803RGB
rgb(221, 152, 3)HSL
hsl(41, 97%, 44%)OKLCH
oklch(0.729 0.152 76.3)CMYK
cmyk(0%, 31%, 99%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C78903
2#B17A03
3#9B6A02
4#855B02
5#6F4C02
6#583D01
7#422E01
8#2C1E01
9#160F00
Tints
Lighter variations
1#F9AB04
2#FCB51E
3#FCBF3A
4#FCC856
5#FDD172
6#FDDA8E
7#FEE3AB
8#FEEDC7
9#FFF6E3
Tones
Muted variations
1#D2940E
2#C79019
3#BC8C24
4#B2882F
5#A7843A
6#9C8045
7#917C50
8#86785A
9#7B7465
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFA #FFFAF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEF3 #FEF3DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEEA #FEEABE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDD9 #FDD98B | BordersInactive statesPlaceholder text |
| 400 | FCC5 #FCC54F | Disabled statesSecondary iconsMuted text |
| 500 | FCB5 #FCB51D | Primary brand colorCTAsActive elementsLinks |
| 600 | DD98 #DD9803 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B079 #B07903 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E56 #7E5602 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5037 #503701 | Primary textHigh emphasis contentDark headings |
| 950 | 3223 #322301 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--dark-orange-50: #FFFAF0;
--dark-orange-100: #FEF3DC;
--dark-orange-200: #FEEABE;
--dark-orange-300: #FDD98B;
--dark-orange-400: #FCC54F;
--dark-orange-500: #FCB51D;
--dark-orange-600: #DD9803;
--dark-orange-700: #B07903;
--dark-orange-800: #7E5602;
--dark-orange-900: #503701;
--dark-orange-950: #322301;
}