Crimson
#FC1D2F
RedColor Codes
All color formats for development
HEX
#FC1D2FRGB
rgb(252, 29, 47)HSL
hsl(355, 97%, 55%)OKLCH
oklch(0.632 0.246 25.5)CMYK
cmyk(0%, 88%, 81%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F90418
2#DD0316
3#C10313
4#A60310
5#8A020D
6#6F020B
7#530108
8#370105
9#1C0003
Tints
Lighter variations
1#FC3444
2#FC4A59
3#FD616E
4#FD7782
5#FD8E97
6#FEA5AC
7#FEBBC1
8#FED2D5
9#FFE8EA
Tones
Muted variations
1#F02839
2#E53342
3#DA3E4B
4#CF4955
5#C4555E
6#B96067
7#AE6B70
8#A3767A
9#978183
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF0 #FFF0F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEDC #FEDCDF | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEBE #FEBEC3 | Secondary backgroundsInput backgroundsDividers |
| 300 | FD8B #FD8B95 | BordersInactive statesPlaceholder text |
| 400 | FC4F #FC4F5E | Disabled statesSecondary iconsMuted text |
| 500 | FC1D #FC1D2F | Primary brand colorCTAsActive elementsLinks |
| 600 | DD03 #DD0316 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B003 #B00311 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E02 #7E020C | Text on light backgroundsHeadingsStrong borders |
| 900 | 5001 #500108 | Primary textHigh emphasis contentDark headings |
| 950 | 3201 #320105 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--crimson-50: #FFF0F1;
--crimson-100: #FEDCDF;
--crimson-200: #FEBEC3;
--crimson-300: #FD8B95;
--crimson-400: #FC4F5E;
--crimson-500: #FC1D2F;
--crimson-600: #DD0316;
--crimson-700: #B00311;
--crimson-800: #7E020C;
--crimson-900: #500108;
--crimson-950: #320105;
}