Indigo
#2D00B3
PurpleColor Codes
All color formats for development
HEX
#2D00B3RGB
rgb(45, 0, 179)HSL
hsl(255, 100%, 35%)OKLCH
oklch(0.365 0.23 275)CMYK
cmyk(75%, 100%, 0%, 30%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2800A1
2#24008F
3#1F007D
4#1B006B
5#160059
6#120047
7#0D0036
8#090024
9#040012
Tints
Lighter variations
1#3500D4
2#3D00F5
3#5117FF
4#6A38FF
5#8359FF
6#9C7AFF
7#B49CFF
8#CDBDFF
9#E6DEFF
Tones
Muted variations
1#3109AA
2#3612A1
3#3A1B98
4#3E248F
5#432D86
6#47367D
7#4C3E74
8#50476B
9#555062
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F0 #F4F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E4DB #E4DBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | CDBD #CDBDFF | Secondary backgroundsInput backgroundsDividers |
| 300 | A78A #A78AFF | BordersInactive statesPlaceholder text |
| 400 | 794D #794DFF | Disabled statesSecondary iconsMuted text |
| 500 | 531A #531AFF | Primary brand colorCTAsActive elementsLinks |
| 600 | 3800 #3800E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2D00 #2D00B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2000 #200080 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1400 #140052 | Primary textHigh emphasis contentDark headings |
| 950 | 0D00 #0D0033 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--indigo-50: #F4F0FF;
--indigo-100: #E4DBFF;
--indigo-200: #CDBDFF;
--indigo-300: #A78AFF;
--indigo-400: #794DFF;
--indigo-500: #531AFF;
--indigo-600: #3800E0;
--indigo-700: #2D00B3;
--indigo-800: #200080;
--indigo-900: #140052;
--indigo-950: #0D0033;
}