Tomato
#EF615D
RedColor Codes
All color formats for development
HEX
#EF615DRGB
rgb(239, 97, 93)HSL
hsl(2, 82%, 65%)OKLCH
oklch(0.673 0.176 24.6)CMYK
cmyk(0%, 59%, 61%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#EC443E
2#E92720
3#D31B15
4#B51712
5#97130F
6#79100C
7#5A0C09
8#3C0806
9#1E0403
Tints
Lighter variations
1#F1716D
2#F2817D
3#F4918D
4#F5A09E
5#F7B0AE
6#F9C0BE
7#FAD0CE
8#FCDFDF
9#FDEFEF
Tones
Muted variations
1#E86864
2#E06F6B
3#D97673
4#D27D7A
5#CA8481
6#C38A88
7#BC9190
8#B49897
9#AD9F9E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF1 #FEF1F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FCDF #FCDFDF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F9C4 #F9C4C3 | Secondary backgroundsInput backgroundsDividers |
| 300 | F497 #F49794 | BordersInactive statesPlaceholder text |
| 400 | EF61 #EF615D | Disabled statesSecondary iconsMuted text |
| 500 | EA34 #EA342E | Primary brand colorCTAsActive elementsLinks |
| 600 | CC1A #CC1A14 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A215 #A21510 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 740F #740F0B | Text on light backgroundsHeadingsStrong borders |
| 900 | 4A0A #4A0A07 | Primary textHigh emphasis contentDark headings |
| 950 | 2E06 #2E0605 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--tomato-50: #FEF1F1;
--tomato-100: #FCDFDF;
--tomato-200: #F9C4C3;
--tomato-300: #F49794;
--tomato-400: #EF615D;
--tomato-500: #EA342E;
--tomato-600: #CC1A14;
--tomato-700: #A21510;
--tomato-800: #740F0B;
--tomato-900: #4A0A07;
--tomato-950: #2E0605;
}