Tomato
#EF582A
RedColor Codes
All color formats for development
HEX
#EF582ARGB
rgb(239, 88, 42)HSL
hsl(14, 86%, 55%)OKLCH
oklch(0.655 0.195 36.7)CMYK
cmyk(0%, 63%, 82%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#EB4412
2#D13D10
3#B7350E
4#9D2E0C
5#82260A
6#681E08
7#4E1706
8#340F04
9#1A0802
Tints
Lighter variations
1#F1683F
2#F27954
3#F48A6A
4#F59B7F
5#F7AB94
6#F9BCAA
7#FACDBF
8#FCDED4
9#FDEEEA
Tones
Muted variations
1#E55D33
2#DB623D
3#D16747
4#C76D51
5#BE725B
6#B47765
7#AA7C6F
8#A08279
9#968782
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF4 #FEF4F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDE5 #FDE5DE | Light backgroundsTable row hoverSkeleton loading |
| 200 | FACF #FACFC1 | Secondary backgroundsInput backgroundsDividers |
| 300 | F7A9 #F7A992 | BordersInactive statesPlaceholder text |
| 400 | F37D #F37D59 | Disabled statesSecondary iconsMuted text |
| 500 | EF58 #EF582A | Primary brand colorCTAsActive elementsLinks |
| 600 | D13D #D13D10 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A630 #A6300C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7723 #772309 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4C16 #4C1606 | Primary textHigh emphasis contentDark headings |
| 950 | 2F0E #2F0E04 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--tomato-50: #FEF4F1;
--tomato-100: #FDE5DE;
--tomato-200: #FACFC1;
--tomato-300: #F7A992;
--tomato-400: #F37D59;
--tomato-500: #EF582A;
--tomato-600: #D13D10;
--tomato-700: #A6300C;
--tomato-800: #772309;
--tomato-900: #4C1606;
--tomato-950: #2F0E04;
}