Crimson
#EF2A2A
RedColor Codes
All color formats for development
HEX
#EF2A2ARGB
rgb(239, 42, 42)HSL
hsl(0, 86%, 55%)OKLCH
oklch(0.614 0.229 27.3)CMYK
cmyk(0%, 82%, 82%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#EB1212
2#D11010
3#B70E0E
4#9D0C0C
5#820A0A
6#680808
7#4E0606
8#340404
9#1A0202
Tints
Lighter variations
1#F13F3F
2#F25454
3#F46A6A
4#F57F7F
5#F79494
6#F9AAAA
7#FABFBF
8#FCD4D4
9#FDEAEA
Tones
Muted variations
1#E53333
2#DB3D3D
3#D14747
4#C75151
5#BE5B5B
6#B46565
7#AA6F6F
8#A07979
9#968282
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF1 #FEF1F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDDE #FDDEDE | Light backgroundsTable row hoverSkeleton loading |
| 200 | FAC1 #FAC1C1 | Secondary backgroundsInput backgroundsDividers |
| 300 | F792 #F79292 | BordersInactive statesPlaceholder text |
| 400 | F359 #F35959 | Disabled statesSecondary iconsMuted text |
| 500 | EF2A #EF2A2A | Primary brand colorCTAsActive elementsLinks |
| 600 | D110 #D11010 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A60C #A60C0C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7709 #770909 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4C06 #4C0606 | Primary textHigh emphasis contentDark headings |
| 950 | 2F04 #2F0404 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--crimson-50: #FEF1F1;
--crimson-100: #FDDEDE;
--crimson-200: #FAC1C1;
--crimson-300: #F79292;
--crimson-400: #F35959;
--crimson-500: #EF2A2A;
--crimson-600: #D11010;
--crimson-700: #A60C0C;
--crimson-800: #770909;
--crimson-900: #4C0606;
--crimson-950: #2F0404;
}