Indigo
#27037D
PurpleColor Codes
All color formats for development
HEX
#27037DRGB
rgb(39, 3, 125)HSL
hsl(258, 95%, 25%)OKLCH
oklch(0.292 0.172 280.8)CMYK
cmyk(69%, 98%, 0%, 51%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#240370
2#200363
3#1C0257
4#18024B
5#14023E
6#100132
7#0C0125
8#080119
9#04000C
Tints
Lighter variations
1#3304A2
2#3F05C7
3#4B06EC
4#611FF9
5#7B45FA
6#956AFB
7#B08FFC
8#CAB4FD
9#E5DAFE
Tones
Muted variations
1#2A0976
2#2C0F70
3#2F156A
4#311B64
5#34215E
6#362858
7#382E52
8#3B344C
9#3D3A46
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F0 #F4F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E6DC #E6DCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | D1BE #D1BEFD | Secondary backgroundsInput backgroundsDividers |
| 300 | AE8D #AE8DFC | BordersInactive statesPlaceholder text |
| 400 | 8451 #8451FB | Disabled statesSecondary iconsMuted text |
| 500 | 611F #611FF9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 4606 #4606DB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3704 #3704AE | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2803 #28037C | Text on light backgroundsHeadingsStrong borders |
| 900 | 1902 #190250 | Primary textHigh emphasis contentDark headings |
| 950 | 1001 #100132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--indigo-50: #F4F0FF;
--indigo-100: #E6DCFE;
--indigo-200: #D1BEFD;
--indigo-300: #AE8DFC;
--indigo-400: #8451FB;
--indigo-500: #611FF9;
--indigo-600: #4606DB;
--indigo-700: #3704AE;
--indigo-800: #28037C;
--indigo-900: #190250;
--indigo-950: #100132;
}