Indigo
#4E12CE
PurpleColor Codes
All color formats for development
HEX
#4E12CERGB
rgb(78, 18, 206)HSL
hsl(259, 84%, 44%)OKLCH
oklch(0.433 0.245 283.7)CMYK
cmyk(62%, 91%, 0%, 19%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#4610BA
2#3E0EA5
3#360D91
4#2F0B7C
5#270967
6#1F0753
7#17053E
8#100429
9#080215
Tints
Lighter variations
1#5814E9
2#6A2DED
3#7C47EF
4#8F61F1
5#A27CF4
6#B496F6
7#C7B0F8
8#DACAFA
9#ECE5FD
Tones
Muted variations
1#511BC5
2#5525BC
3#582EB2
4#5B38A9
5#5F419F
6#624B96
7#66548C
8#695D83
9#6D677A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F5F1 #F5F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E8DE #E8DEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | D4C2 #D4C2FA | Secondary backgroundsInput backgroundsDividers |
| 300 | B293 #B293F6 | BordersInactive statesPlaceholder text |
| 400 | 8A5B #8A5BF1 | Disabled statesSecondary iconsMuted text |
| 500 | 692C #692CED | Primary brand colorCTAsActive elementsLinks |
| 600 | 4E12 #4E12CE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3E0E #3E0EA4 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2C0A #2C0A75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1C07 #1C074B | Primary textHigh emphasis contentDark headings |
| 950 | 1204 #12042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--indigo-50: #F5F1FE;
--indigo-100: #E8DEFC;
--indigo-200: #D4C2FA;
--indigo-300: #B293F6;
--indigo-400: #8A5BF1;
--indigo-500: #692CED;
--indigo-600: #4E12CE;
--indigo-700: #3E0EA4;
--indigo-800: #2C0A75;
--indigo-900: #1C074B;
--indigo-950: #12042F;
}