Indigo
#50023A
PinkColor Codes
All color formats for development
HEX
#50023ARGB
rgb(80, 2, 58)HSL
hsl(317, 95%, 16%)OKLCH
oklch(0.29 0.121 343.7)CMYK
cmyk(0%, 98%, 28%, 69%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#480234
2#40022E
3#380128
4#300123
5#28011D
6#200117
7#180111
8#10000C
9#080006
Tints
Lighter variations
1#790358
2#A30476
3#CD0594
4#F706B3
5#FA2EC0
6#FB58CD
7#FC82D9
8#FDABE6
9#FED5F2
Tones
Muted variations
1#4C0638
2#480A36
3#440E35
4#401233
5#3C1531
6#381930
7#341D2E
8#31212C
9#2D252A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF0 #FFF0FA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEDC #FEDCF4 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDBE #FDBEEB | Secondary backgroundsInput backgroundsDividers |
| 300 | FC8D #FC8DDC | BordersInactive statesPlaceholder text |
| 400 | FB51 #FB51CA | Disabled statesSecondary iconsMuted text |
| 500 | F91F #F91FBB | Primary brand colorCTAsActive elementsLinks |
| 600 | DB06 #DB069E | Hover statesFocus ringsPrimary buttons hover |
| 700 | AE04 #AE047E | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7C03 #7C035A | Text on light backgroundsHeadingsStrong borders |
| 900 | 5002 #50023A | Primary textHigh emphasis contentDark headings |
| 950 | 3201 #320124 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--indigo-50: #FFF0FA;
--indigo-100: #FEDCF4;
--indigo-200: #FDBEEB;
--indigo-300: #FC8DDC;
--indigo-400: #FB51CA;
--indigo-500: #F91FBB;
--indigo-600: #DB069E;
--indigo-700: #AE047E;
--indigo-800: #7C035A;
--indigo-900: #50023A;
--indigo-950: #320124;
}