Orange Red
#E03400
RedColor Codes
All color formats for development
HEX
#E03400RGB
rgb(224, 52, 0)HSL
hsl(14, 100%, 44%)OKLCH
oklch(0.592 0.213 34)CMYK
cmyk(0%, 77%, 100%, 12%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#CA2F00
2#B42A00
3#9D2500
4#871F00
5#701A00
6#5A1500
7#431000
8#2D0A00
9#160500
Tints
Lighter variations
1#FD3B00
2#FF501B
3#FF6637
4#FF7C54
5#FF9270
6#FFA78D
7#FFBDA9
8#FFD3C6
9#FFE9E2
Tones
Muted variations
1#D53A0B
2#CA4016
3#BF4622
4#B44C2D
5#A85238
6#9D5843
7#925E4F
8#87645A
9#7B6A65
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF3 #FFF3F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFE4 #FFE4DB | Light backgroundsTable row hoverSkeleton loading |
| 200 | FFCC #FFCCBD | Secondary backgroundsInput backgroundsDividers |
| 300 | FFA5 #FFA58A | BordersInactive statesPlaceholder text |
| 400 | FF76 #FF764D | Disabled statesSecondary iconsMuted text |
| 500 | FF4F #FF4F1A | Primary brand colorCTAsActive elementsLinks |
| 600 | E034 #E03400 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B32A #B32A00 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 801E #801E00 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5213 #521300 | Primary textHigh emphasis contentDark headings |
| 950 | 330C #330C00 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orange-red-50: #FFF3F0;
--orange-red-100: #FFE4DB;
--orange-red-200: #FFCCBD;
--orange-red-300: #FFA58A;
--orange-red-400: #FF764D;
--orange-red-500: #FF4F1A;
--orange-red-600: #E03400;
--orange-red-700: #B32A00;
--orange-red-800: #801E00;
--orange-red-900: #521300;
--orange-red-950: #330C00;
}