Dark Red
#503701
OrangeColor Codes
All color formats for development
HEX
#503701RGB
rgb(80, 55, 1)HSL
hsl(41, 98%, 16%)OKLCH
oklch(0.356 0.073 80)CMYK
cmyk(0%, 31%, 99%, 69%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#493201
2#412C01
3#392701
4#302100
5#281C00
6#201600
7#181100
8#100B00
9#080600
Tints
Lighter variations
1#7B5501
2#A67202
3#D08F02
4#FAAC03
5#FDBA2B
6#FDC855
7#FED680
8#FEE4AA
9#FFF1D5
Tones
Muted variations
1#4D3605
2#493509
3#45330D
4#413211
5#3D3015
6#392F19
7#352D1D
8#312C21
9#2D2A25
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFA #FFFAF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFF4 #FFF4DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEEA #FEEABD | Secondary backgroundsInput backgroundsDividers |
| 300 | FED9 #FED98B | BordersInactive statesPlaceholder text |
| 400 | FDC6 #FDC64E | Disabled statesSecondary iconsMuted text |
| 500 | FDB5 #FDB51C | Primary brand colorCTAsActive elementsLinks |
| 600 | DE99 #DE9902 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B179 #B17902 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E57 #7E5701 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5137 #513701 | 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-red-50: #FFFAF0;
--dark-red-100: #FFF4DC;
--dark-red-200: #FEEABD;
--dark-red-300: #FED98B;
--dark-red-400: #FDC64E;
--dark-red-500: #FDB51C;
--dark-red-600: #DE9902;
--dark-red-700: #B17902;
--dark-red-800: #7E5701;
--dark-red-900: #513701;
--dark-red-950: #322301;
}