HEX
#3F51B5Primary tokenDesign System Color Reference
Material Indigo 500 Color Code
Material Indigo 500·#3F51B5
Blue FamilyCoolMid toneMid saturationoklch(47.8% 0.159 271)
RGB
rgb(63, 81, 181)Screen valuesHSL
hsl(231 48% 48%)Hue and lightnessCMYK
65, 55, 0, 29Print handoffLAB
38, 26, -55Perceptual referenceOKLCH
oklch(47.8% 0.159 271)Modern perceptualMaterial Indigo 500 is the core published indigo in the Material Design palette at #3F51B5. Use it when you want a more blue-violet Material primary for app shells, navigation, premium product surfaces, and interfaces that need more depth than standard blue.
Best text colorWhite text
Body text contrast6.87:1
Best UseApp shells, premium navigation, and blue-violet design-system accents
Tonal Scale
100#DCE0F2
300#A7AFDD
500#6270C2
600#3F51B5
800#2D3A82
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
6.87:1Safe for body text
Dark text on this color
Large headings and selective UI.
2.50:1Needs more separation
This color on light surface
Links, borders, and icons on light UI.
6.53:1Safe for body text
Best text colorWhite textContrast 6.87:1
Professional Reference
OKLCHoklch(47.8% 0.159 271)
Relative Luminance0.1028
Source TypeDesign System Color
Classification
Blue FamilyCoolMid toneMid saturation
Source Context
Source Type
Design System Color
System
Material
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.
6.87:1AA
Dark text on this color
Dark text or headings on the current color.
2.50:1Needs more separation
This color on light surface
Use this color for links, strokes, or icons on light UI.
6.53:1AA
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
2.50:1Needs more separation
Best text colorWhite textContrast 6.87:1 · AA
Where It Works
- App shells, navigation, and deeper Material accents.
- More violet-leaning than standard product blue.
- Pairs with white, silver neutrals, and brighter blue highlights.
Reference Notes
Last Updated
2026-06-09
Source Library
Material Design Colors
Methodology
Verified source values + site guidance
Color Notes
Material Indigo 500 is sourced from the published Material Design 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-material-indigo-500: #3F51B5;
--color-material-indigo-500-rgb: 63 81 181;
}class="bg-[#3F51B5] text-white"
class="hover:bg-[#2D3A82] ring-1 ring-[#3F51B5]"{
"materialIndigo-500": "#3F51B5",
"materialIndigo-500Rgb": [63, 81, 181],
"materialIndigo-500Hsl": [231, 48, 48]
}