Crimson
#D90840
PinkColor Codes
All color formats for development
HEX
#D90840RGB
rgb(217, 8, 64)HSL
hsl(344, 93%, 44%)OKLCH
oklch(0.563 0.223 18)CMYK
cmyk(0%, 96%, 71%, 15%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C30739
2#AD0633
3#98052C
4#820526
5#6C0420
6#570319
7#410213
8#2B020D
9#160106
Tints
Lighter variations
1#F40948
2#F7235B
3#F83E70
4#F95A84
5#FA7599
6#FB91AD
7#FCACC2
8#FDC8D6
9#FEE3EB
Tones
Muted variations
1#CE1244
2#C41D49
3#B9274E
4#AF3253
5#A43C58
6#9A465D
7#905162
8#855B66
9#7B666B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF0 #FEF0F4 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEDD #FEDDE5 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDBF #FDBFCF | Secondary backgroundsInput backgroundsDividers |
| 300 | FB8E #FB8EAB | BordersInactive statesPlaceholder text |
| 400 | F953 #F9537F | Disabled statesSecondary iconsMuted text |
| 500 | F722 #F7225A | Primary brand colorCTAsActive elementsLinks |
| 600 | D908 #D90840 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AC06 #AC0633 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7B04 #7B0424 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F03 #4F0317 | Primary textHigh emphasis contentDark headings |
| 950 | 3102 #31020E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--crimson-50: #FEF0F4;
--crimson-100: #FEDDE5;
--crimson-200: #FDBFCF;
--crimson-300: #FB8EAB;
--crimson-400: #F9537F;
--crimson-500: #F7225A;
--crimson-600: #D90840;
--crimson-700: #AC0633;
--crimson-800: #7B0424;
--crimson-900: #4F0317;
--crimson-950: #31020E;
}