Indigo HEX Code
The HEX code for indigo is #4B0082. Indigo is a deep blue-violet color positioned between blue and violet in the visible spectrum. Named after the indigo dye derived from plants, it's one of the seven colors of the rainbow.
Indigo Color Values
| Format | Value |
|---|---|
| HEX | #4B0082 |
| RGB | rgb(75, 0, 130) |
| HSL | hsl(275, 100%, 25%) |
| CMYK | C:42 M:100 Y:0 K:49 |
Indigo Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Indigo | #8A2BE2 | Blue Violet |
| Indigo | #4B0082 | CSS indigo |
| Dark Indigo | #310062 | Deeper tone |
| Navy | #000080 | Blue-dominant |
| Purple | #800080 | Red-dominant |
| Midnight Blue | #191970 | Dark blue |
Indigo in Design
Indigo conveys:
- Depth: Mystery, introspection
- Wisdom: Intuition, perception
- Spirituality: Meditation, mindfulness
- Luxury: Premium, sophisticated
Rainbow Indigo
Indigo is the sixth color in the rainbow:
| Position | Color | HEX |
|---|---|---|
| 5 | Blue | #0000FF |
| 6 | Indigo | #4B0082 |
| 7 | Violet | #EE82EE |
Using Indigo in Design
``css
/* Indigo palette */
:root {
--indigo-light: #6366F1;
--indigo: #4B0082;
--indigo-dark: #3730A3;
}
/* Modern indigo button */
.btn-indigo {
background-color: #4F46E5;
color: white;
}
`
Tailwind Indigo Scale
| Level | HEX | Use |
|---|---|---|
| 50 | #EEF2FF | Backgrounds |
| 500 | #6366F1 | Primary |
| 700 | #4338CA | Dark |
| 900 | #312E81 | Very dark |
Indigo is popular in modern UI design, particularly for primary brand colors in tech and SaaS applications.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.