Electric Indigo
Brand & PlayfulVibrant high-contrast indigo engineered for primary CTA buttons and focus states in modern web apps.
About the Electric Indigo palette
Vibrant high-contrast indigo engineered for primary CTA buttons and focus states in modern web apps. The scale is anchored at hue 285 in OKLCH, so every step keeps the same hue while lightness moves in perceptually even steps from 50 to 950. The 500 step (#6c4cef) is your base color. Shades 500-950 pass WCAG 2.1 AA against white and shades 50, 100, 200, 300, 400 pass against black, so use the light end for backgrounds and the dark end for text on light surfaces (or vice versa). Each value is copy-ready as oklch(), HEX, RGB or HSL.
11 colors · click a card to copy
cart writes to --color-electric-indigo-*
Shade Step Breakdown (50 to 950)
| Swatch | Shade Step | OKLCH CSS Value | sRGB Fallback | RGB | HSL | WCAG on Black | WCAG on White | Gamut |
|---|---|---|---|---|---|---|---|---|
| 50 | oklch(97.0% 0.014 285.0) | #f4f4ff | rgb(244, 244, 255) | hsl(238.56, 96.56%, 97.75%) | 19.23:1 | 1.09:1 | sRGB | |
| 100 | oklch(93.0% 0.034 285.0) | #e5e5ff | rgb(229, 229, 255) | hsl(239.07, 96.35%, 94.78%) | 16.98:1 | 1.24:1 | sRGB | |
| 200 | oklch(86.0% 0.070 285.0) | #cbcbfe | rgb(203, 203, 254) | hsl(240.23, 96.66%, 89.68%) | 13.51:1 | 1.55:1 | sRGB | |
| 300 | oklch(76.0% 0.126 285.0) | #a9a5fd | rgb(169, 165, 253) | hsl(242.63, 96.69%, 82.08%) | 9.49:1 | 2.21:1 | sRGB | |
| 400 | oklch(64.0% 0.198 285.0) | #8473fd | rgb(132, 115, 253) | hsl(247.46, 96.91%, 72.09%) | 5.85:1 | 3.59:1 | sRGB | |
| 500 | oklch(55.0% 0.230 285.0) | #6c4cef | rgb(108, 76, 239) | hsl(251.83, 83.13%, 61.71%) | 3.92:1 | 5.36:1 | sRGB | |
| 600 | oklch(45.0% 0.230 285.0) | #5326cc | rgb(83, 38, 204) | hsl(256.52, 68.76%, 47.3%) | 2.52:1 | 8.34:1 | sRGB | |
| 700 | oklch(37.0% 0.212 285.0) | #4006a7 | rgb(64, 6, 167) | hsl(261.58, 93.24%, 33.95%) | 1.8:1 | 11.65:1 | sRGB | |
| 800 | oklch(28.0% 0.160 285.0) | #290372 | rgb(41, 3, 114) | hsl(260.69, 95.57%, 22.84%) | 1.35:1 | 15.55:1 | sRGB | |
| 900 | oklch(20.0% 0.115 285.0) | #160146 | rgb(22, 1, 70) | hsl(258.38, 97.35%, 13.91%) | 1.13:1 | 18.64:1 | sRGB | |
| 950 | oklch(13.0% 0.074 285.0) | #070023 | rgb(7, 0, 35) | hsl(252.16, 98.51%, 6.91%) | 1.03:1 | 20.32:1 | sRGB |
Tailwind v4 @theme Snippet for Electric Indigo
Copy into global.css
@theme {
--color-electric-indigo-50: oklch(97.0% 0.014 285.0);
--color-electric-indigo-100: oklch(93.0% 0.034 285.0);
--color-electric-indigo-200: oklch(86.0% 0.070 285.0);
--color-electric-indigo-300: oklch(76.0% 0.126 285.0);
--color-electric-indigo-400: oklch(64.0% 0.198 285.0);
--color-electric-indigo-500: oklch(55.0% 0.230 285.0);
--color-electric-indigo-600: oklch(45.0% 0.230 285.0);
--color-electric-indigo-700: oklch(37.0% 0.212 285.0);
--color-electric-indigo-800: oklch(28.0% 0.160 285.0);
--color-electric-indigo-900: oklch(20.0% 0.115 285.0);
--color-electric-indigo-950: oklch(13.0% 0.074 285.0);
}Convert Electric Indigo shades
Working with these shades in another format? Use the matching converter — the same values you see above, converted instantly with live gamut detection.