Tomato
#E24536
RedColor Codes
All color formats for development
HEX
#E24536RGB
rgb(226, 69, 54)HSL
hsl(5, 75%, 55%)OKLCH
oklch(0.614 0.196 29.3)CMYK
cmyk(0%, 69%, 76%, 11%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#DD2F20
2#C42A1C
3#AC2519
4#932015
5#7B1A12
6#62150E
7#4A100B
8#310B07
9#190504
Tints
Lighter variations
1#E5574A
2#E86A5E
3#EB7C72
4#EE8F87
5#F1A29B
6#F4B4AF
7#F6C7C3
8#F9DAD7
9#FCECEB
Tones
Muted variations
1#DA4C3F
2#D15347
3#C85A50
4#C06159
5#B76861
6#AF706A
7#A67772
8#9D7E7B
9#958584
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF3 #FDF3F2 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBE2 #FBE2E0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | F7C9 #F7C9C5 | Secondary backgroundsInput backgroundsDividers |
| 300 | F0A0 #F0A098 | BordersInactive statesPlaceholder text |
| 400 | E96E #E96E63 | Disabled statesSecondary iconsMuted text |
| 500 | E245 #E24536 | Primary brand colorCTAsActive elementsLinks |
| 600 | C42A #C42A1C | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9C21 #9C2116 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7018 #701810 | Text on light backgroundsHeadingsStrong borders |
| 900 | 470F #470F0A | Primary textHigh emphasis contentDark headings |
| 950 | 2D0A #2D0A06 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--tomato-50: #FDF3F2;
--tomato-100: #FBE2E0;
--tomato-200: #F7C9C5;
--tomato-300: #F0A098;
--tomato-400: #E96E63;
--tomato-500: #E24536;
--tomato-600: #C42A1C;
--tomato-700: #9C2116;
--tomato-800: #701810;
--tomato-900: #470F0A;
--tomato-950: #2D0A06;
}