Dark Red
#7E3802
OrangeColor Codes
All color formats for development
HEX
#7E3802RGB
rgb(126, 56, 2)HSL
hsl(26, 97%, 25%)OKLCH
oklch(0.428 0.113 49.5)CMYK
cmyk(0%, 56%, 98%, 51%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#713202
2#642C02
3#582701
4#4B2101
5#3F1C01
6#321601
7#261101
8#190B00
9#0D0600
Tints
Lighter variations
1#A34802
2#C95903
3#EF6904
4#FC7D1D
5#FC9343
6#FDA968
7#FDBE8E
8#FED4B4
9#FEE9D9
Tones
Muted variations
1#773808
2#71390E
3#6B3A14
4#653B1B
5#5F3C21
6#583C27
7#523D2D
8#4C3E33
9#463F3A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF6 #FFF6F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEEB #FEEBDC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEDA #FEDABE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDBD #FDBD8B | BordersInactive statesPlaceholder text |
| 400 | FC9A #FC9A4F | Disabled statesSecondary iconsMuted text |
| 500 | FC7D #FC7D1D | Primary brand colorCTAsActive elementsLinks |
| 600 | DD62 #DD6203 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B04E #B04E03 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E38 #7E3802 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5024 #502401 | Primary textHigh emphasis contentDark headings |
| 950 | 3216 #321601 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--dark-red-50: #FFF6F0;
--dark-red-100: #FEEBDC;
--dark-red-200: #FEDABE;
--dark-red-300: #FDBD8B;
--dark-red-400: #FC9A4F;
--dark-red-500: #FC7D1D;
--dark-red-600: #DD6203;
--dark-red-700: #B04E03;
--dark-red-800: #7E3802;
--dark-red-900: #502401;
--dark-red-950: #321601;
}