Indigo
#510080
PurpleColor Codes
All color formats for development
HEX
#510080RGB
rgb(81, 0, 128)HSL
hsl(278, 100%, 25%)OKLCH
oklch(0.346 0.179 305.8)CMYK
cmyk(37%, 100%, 0%, 50%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#490073
2#410066
3#390059
4#30004D
5#280040
6#200033
7#180026
8#10001A
9#08000D
Tints
Lighter variations
1#6900A6
2#8100CC
3#9900F2
4#AB1AFF
5#B940FF
6#C766FF
7#D58CFF
8#E3B3FF
9#F1D9FF
Tones
Muted variations
1#4F0679
2#4D0D73
3#4C136C
4#4A1966
5#482060
6#472659
7#452D53
8#43334D
9#413946
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F9F0 #F9F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F2DB #F2DBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | E7BD #E7BDFF | Secondary backgroundsInput backgroundsDividers |
| 300 | D48A #D48AFF | BordersInactive statesPlaceholder text |
| 400 | BE4D #BE4DFF | Disabled statesSecondary iconsMuted text |
| 500 | AB1A #AB1AFF | Primary brand colorCTAsActive elementsLinks |
| 600 | 8E00 #8E00E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 7100 #7100B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5100 #510080 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3400 #340052 | Primary textHigh emphasis contentDark headings |
| 950 | 2000 #200033 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--indigo-50: #F9F0FF;
--indigo-100: #F2DBFF;
--indigo-200: #E7BDFF;
--indigo-300: #D48AFF;
--indigo-400: #BE4DFF;
--indigo-500: #AB1AFF;
--indigo-600: #8E00E0;
--indigo-700: #7100B3;
--indigo-800: #510080;
--indigo-900: #340052;
--indigo-950: #200033;
}