Indigo
#42074A
PinkColor Codes
All color formats for development
HEX
#42074ARGB
rgb(66, 7, 74)HSL
hsl(293, 83%, 16%)OKLCH
oklch(0.278 0.121 322.5)CMYK
cmyk(11%, 91%, 0%, 71%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3C0643
2#35063C
3#2F0534
4#28042D
5#210325
6#1B031E
7#140216
8#0D010F
9#070107
Tints
Lighter variations
1#660B72
2#890E99
3#AC12C0
4#CF16E7
5#D83BED
6#E062F0
7#E889F4
8#EFB1F8
9#F7D8FB
Tones
Muted variations
1#400A47
2#3E0E44
3#3B1141
4#38143D
5#36183A
6#331B36
7#311F33
8#2E2230
9#2B252C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FCF1 #FCF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F9DE #F9DEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | F3C2 #F3C2F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | EA94 #EA94F5 | BordersInactive statesPlaceholder text |
| 400 | DF5C #DF5CF0 | Disabled statesSecondary iconsMuted text |
| 500 | D52D #D52DEB | Primary brand colorCTAsActive elementsLinks |
| 600 | B813 #B813CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 920F #920FA3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 680B #680B75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4307 #43074B | Primary textHigh emphasis contentDark headings |
| 950 | 2A04 #2A042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--indigo-50: #FCF1FE;
--indigo-100: #F9DEFC;
--indigo-200: #F3C2F9;
--indigo-300: #EA94F5;
--indigo-400: #DF5CF0;
--indigo-500: #D52DEB;
--indigo-600: #B813CD;
--indigo-700: #920FA3;
--indigo-800: #680B75;
--indigo-900: #43074B;
--indigo-950: #2A042F;
}