HEX
#1A237EPrimary tokenDesign System Color Reference
Material Indigo 900 Color Code
Material Indigo 900·#1A237E
Blue FamilyCoolDark toneMid saturationoklch(32.1% 0.151 270)
RGB
rgb(26, 35, 126)Screen valuesHSL
hsl(235 66% 30%)Hue and lightnessCMYK
79, 72, 0, 51Print handoffLAB
20, 31, -52Perceptual referenceOKLCH
oklch(32.1% 0.151 270)Modern perceptualMaterial Indigo 900 is the deepest published indigo step in the Material Design palette at #1A237E. Use it when you need a near-night Material indigo for app shells, navigation, modal backdrops, and interfaces that should feel more serious and structural than Indigo 700.
Best text colorWhite text
Body text contrast13.24:1
Best UseDark app shells, enterprise navigation, and deepest Material indigo anchors
Tonal Scale
100#D6D7E8
300#969AC4
500#434B95
600#1A237E
800#13195B
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
13.24:1AAA-level contrast
Dark text on this color
Large headings and selective UI.
1.29:1Needs more separation
This color on light surface
Links, borders, and icons on light UI.
12.58:1AAA-level contrast
Best text colorWhite textContrast 13.24:1
Professional Reference
OKLCHoklch(32.1% 0.151 270)
Relative Luminance0.0293
Source TypeDesign System Color
Classification
Blue FamilyCoolDark toneMid saturation
Source Context
Source Type
Design System Color
System
Material
Step
900
System Role
- Best for deep shells, dark themes, and structural anchors.
Closest Matches
Accessibility Matrix
White text on this color
White text placed on the current color.
13.24:1AAA
Dark text on this color
Dark text or headings on the current color.
1.29:1Needs more separation
This color on light surface
Use this color for links, strokes, or icons on light UI.
12.58:1AAA
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
1.29:1Needs more separation
Best text colorWhite textContrast 13.24:1 · AAA
Where It Works
- Navigation, dark shells, and deep structural accents.
- Deepest Material indigo for more weight than 700.
- Pairs with white, silver neutrals, and brighter indigo highlights.
Reference Notes
Last Updated
2026-06-09
Source Library
Material Design Colors
Methodology
Verified source values + site guidance
Color Notes
Material Indigo 900 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-900: #1A237E;
--color-material-indigo-900-rgb: 26 35 126;
}class="bg-[#1A237E] text-white"
class="hover:bg-[#13195B] ring-1 ring-[#1A237E]"{
"materialIndigo-900": "#1A237E",
"materialIndigo-900Rgb": [26, 35, 126],
"materialIndigo-900Hsl": [235, 66, 30]
}