HEX
#6366F1Primary tokenDesign System Color Reference
Tailwind Indigo 500 Color Code
Tailwind Indigo 500·#6366F1
Blue FamilyCoolMid toneHigh saturationoklch(58.5% 0.204 277)
RGB
rgb(99, 102, 241)Screen valuesHSL
hsl(239 84% 67%)Hue and lightnessCMYK
59, 58, 0, 5Print handoffLAB
50, 39, -70Perceptual referenceOKLCH
oklch(58.5% 0.204 277)Modern perceptualTailwind Indigo 500 is the core published indigo in the Tailwind CSS palette at #6366F1. Use it when you want a more violet-leaning utility-first primary for app shells, navigation, product hierarchy, and interfaces that need more personality than standard blue.
Best text colorWhite text
Body text contrast4.47:1
Best UseModern app shells, utility-first indigo accents, and cooler product hierarchy
Tonal Scale
100#E3E3FC
300#B7B9F9
500#7F82F4
600#6366F1
800#4749AE
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
4.47:1Large text / UI only
Dark text on this color
Large headings and selective UI.
3.84:1Large text / UI only
This color on light surface
Links, borders, and icons on light UI.
4.24:1Large text / UI only
Best text colorWhite textContrast 4.47:1
Professional Reference
OKLCHoklch(58.5% 0.204 277)
Relative Luminance0.1851
Source TypeDesign System Color
Classification
Blue FamilyCoolMid toneHigh saturation
Source Context
Source Type
Design System Color
System
Tailwind
Step
500
System Role
- Usually the base brand or product token in a design system.
Closest Matches
Accessibility Matrix
White text on this color
White text placed on the current color.
4.47:1Large text / UI only
Dark text on this color
Dark text or headings on the current color.
3.84:1Large text / UI only
This color on light surface
Use this color for links, strokes, or icons on light UI.
4.24:1Large text / UI only
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
3.84:1Large text / UI only
Best text colorWhite textContrast 4.47:1 · Large text / UI only
Where It Works
- App shells, navigation, and utility-first indigo accents.
- More personality than standard blue, still production-friendly.
- 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 500 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-500: #6366F1;
--color-tailwind-indigo-500-rgb: 99 102 241;
}class="bg-[#6366F1] text-white"
class="hover:bg-[#4749AE] ring-1 ring-[#6366F1]"{
"tailwindIndigo-500": "#6366F1",
"tailwindIndigo-500Rgb": [99, 102, 241],
"tailwindIndigo-500Hsl": [239, 84, 67]
}