Color Values
- HEX
- #818CF8
- RGB
- rgb(129, 140, 248)
- HSL
- hsl(234, 89%, 74%)
- OKLCH
- oklch(0.680 0.158 277)
- CMYK
- cmyk(48%, 44%, 0%, 3%)
- CSS Variable
- var(--color-indigo-400)
- Tailwind Class
- bg-indigo-400
Accessibility Score
Good
Based on WCAG 2.1 contrast ratios against white and black backgrounds.
On White
2.98:1
On Black
7.04:1
Tailwind Usage — All Utilities
Background
bg-indigo-400Text
text-indigo-400Border
border-indigo-400Ring
ring-indigo-400Outline
outline-indigo-400Fill
fill-indigo-400Stroke
stroke-indigo-400From (gradient)
from-indigo-400Via (gradient)
via-indigo-400To (gradient)
to-indigo-400Placeholder
placeholder-indigo-400Caret
caret-indigo-400Accent
accent-indigo-400Decoration
decoration-indigo-400Shadow Color
shadow-indigo-400Tailwind v3 Config (extend custom color)
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'indigo-400': '#818cf8',
},
},
},
};CSS Equivalent
/* Hex */
background-color: #818CF8;
/* RGB */
background-color: rgb(129, 140, 248);
/* HSL */
background-color: hsl(234, 89%, 74%);
/* OKLCH (CSS Color Level 4) */
background-color: oklch(0.680 0.158 277);
/* CSS Custom Property (Tailwind v4) */
background-color: var(--color-indigo-400);
/* Gradient example */
background: linear-gradient(135deg, #eef2ff 0%, #6366f1 100%);OKLCH — Modern Color Space
Lightness (L)
0.680
68% perceived brightness
Chroma (C)
0.158
Color intensity / saturation
Hue (H)
277°
Angle on perceptual hue wheel
oklch(0.680 0.158 277)OKLCH is a perceptually uniform color space in CSS Color Level 4. Unlike HSL, equal steps in L produce equal perceived lightness changes — making it ideal for building accessible, harmonious design system scales.
Design Recommendations
Mid-tone accent
Shade 400 of the Indigo palette
Recommended Uses
- ✓Icon fills on white
- ✓Secondary buttons (large text)
- ✓Chart & data visualization bars
- ✓Decorative UI elements
Avoid
Preview
On White
Aa Bb Cc
On Black
Aa Bb Cc
As Background
Aa Bb Cc — #818CF8
Similar Tailwind Colors
Perceptually close shades from other Tailwind color families.
Nearest Named Color
Tailwind Indigo 400
Nearest Tailwind equivalent — #818CF8
Frequently Asked Questions
- What is the hex code for Tailwind Indigo 400?
- Tailwind Indigo 400 has the hex code #818CF8. Its RGB value is rgb(129, 140, 248) and its HSL value is hsl(234, 89%, 74%).
- What Tailwind utility classes use Indigo 400?
- Use bg-indigo-400 for backgrounds, text-indigo-400 for text color, border-indigo-400 for borders, and ring-indigo-400 for focus rings. In Tailwind v4 the CSS variable var(--color-indigo-400) is available natively.
- Is Tailwind Indigo 400 WCAG accessible?
- Tailwind Indigo 400 achieves a 2.98:1 contrast ratio on white (Fail) and 7.04:1 on black (AAA). Its overall accessibility score is 60/100 (Good).
- What is the OKLCH value for Tailwind Indigo 400?
- Tailwind Indigo 400 in OKLCH is oklch(0.680 0.158 277) — lightness 0.680, chroma 0.158, hue 277°. OKLCH is a perceptually uniform space supported natively in modern CSS via the `color()` function.
- What is Tailwind Indigo 400 used for?
- At shade 400, Tailwind Indigo 400 is best described as "Mid-tone accent". Recommended uses: Icon fills on white, Secondary buttons (large text), Chart & data visualization bars.