HEX
#4F46E5Primary tokenDesign System Color Reference
Tailwind Indigo 600 Color Code
Tailwind Indigo 600·#4F46E5
Blue FamilyCoolMid toneHigh saturationoklch(51.1% 0.230 277)
RGB
rgb(79, 70, 229)Screen valuesHSL
hsl(243 75% 59%)Hue and lightnessCMYK
66, 69, 0, 10Print handoffLAB
41, 51, -79Perceptual referenceOKLCH
oklch(51.1% 0.230 277)Modern perceptualTailwind Indigo 600 is a darker published indigo step in the Tailwind CSS palette at #4F46E5. Use it when you need more force than Indigo 500 for CTAs, active nav, app hierarchy, and production interfaces that want a cooler blue-violet anchor.
Best text colorWhite text
Body text contrast6.29:1
Best UseStronger utility-first indigo CTAs, navigation, and deeper product hierarchy
Tonal Scale
100#DFDEFA
300#AEAAF3
500#6F67EA
600#4F46E5
800#3932A5
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
6.29:1Safe for body text
Dark text on this color
Large headings and selective UI.
2.73:1Needs more separation
This color on light surface
Links, borders, and icons on light UI.
5.97:1Safe for body text
Best text colorWhite textContrast 6.29:1
Professional Reference
OKLCHoklch(51.1% 0.230 277)
Relative Luminance0.1170
Source TypeDesign System Color
Classification
Blue FamilyCoolMid toneHigh saturation
Source Context
Source Type
Design System Color
System
Tailwind
Step
600
System Role
- Often used for stronger actions, active states, and hover emphasis.
Closest Matches
Accessibility Matrix
White text on this color
White text placed on the current color.
6.29:1AA
Dark text on this color
Dark text or headings on the current color.
2.73:1Needs more separation
This color on light surface
Use this color for links, strokes, or icons on light UI.
5.97:1AA
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
2.73:1Needs more separation
Best text colorWhite textContrast 6.29:1 · AA
Where It Works
- CTAs, active navigation, and stronger product hierarchy.
- Darker than Indigo 500, still bright enough for action roles.
- Pairs with white, slate neutrals, and deeper indigo anchors.
Reference Notes
Last Updated
2026-06-09
Source Library
Tailwind CSS Colors
Methodology
Verified source values + site guidance
Color Notes
Tailwind Indigo 600 is sourced from the published Tailwind CSS Colors library and retained here as a searchable reference swatch for product, interface, and branding work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Collections
Design System Palettes
Related Colors
Palette Starting Points
Implementation Snippets
:root {
--color-tailwind-indigo-600: #4F46E5;
--color-tailwind-indigo-600-rgb: 79 70 229;
}class="bg-[#4F46E5] text-white"
class="hover:bg-[#3932A5] ring-1 ring-[#4F46E5]"{
"tailwindIndigo-600": "#4F46E5",
"tailwindIndigo-600Rgb": [79, 70, 229],
"tailwindIndigo-600Hsl": [243, 75, 59]
}