HEX
#303F9FPrimary tokenDesign System Color Reference
Material Indigo 700 Color Code
Material Indigo 700·#303F9F
Blue FamilyCoolMid toneMid saturationoklch(41.6% 0.156 271)
RGB
rgb(48, 63, 159)Screen valuesHSL
hsl(232 54% 41%)Hue and lightnessCMYK
70, 60, 0, 38Print handoffLAB
31, 27, -54Perceptual referenceOKLCH
oklch(41.6% 0.156 271)Modern perceptualMaterial Indigo 700 is a darker published indigo step in the Material Design palette at #303F9F. Use it when you need a more structural Material indigo for app shells, navigation, pressed states, and interfaces that should feel deeper and more technical than Indigo 500.
Best text colorWhite text
Body text contrast8.98:1
Best UseDeeper app shells, serious navigation, and stronger Material indigo structure
Tonal Scale
100#DADCEE
300#A0A7D3
500#5562B0
600#303F9F
800#232D72
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
8.98:1AAA-level contrast
Dark text on this color
Large headings and selective UI.
1.91:1Needs more separation
This color on light surface
Links, borders, and icons on light UI.
8.54:1AAA-level contrast
Best text colorWhite textContrast 8.98:1
Professional Reference
OKLCHoklch(41.6% 0.156 271)
Relative Luminance0.0669
Source TypeDesign System Color
Classification
Blue FamilyCoolMid toneMid saturation
Source Context
Source Type
Design System Color
System
Material
Step
700
System Role
- Good for navigation, pressed states, and stronger hierarchy anchors.
Closest Matches
Accessibility Matrix
White text on this color
White text placed on the current color.
8.98:1AAA
Dark text on this color
Dark text or headings on the current color.
1.91:1Needs more separation
This color on light surface
Use this color for links, strokes, or icons on light UI.
8.54:1AAA
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
1.91:1Needs more separation
Best text colorWhite textContrast 8.98:1 · AAA
Where It Works
- App shells, navigation, and stronger structural accents.
- Darker Material indigo for more technical depth.
- 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 700 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-700: #303F9F;
--color-material-indigo-700-rgb: 48 63 159;
}class="bg-[#303F9F] text-white"
class="hover:bg-[#232D72] ring-1 ring-[#303F9F]"{
"materialIndigo-700": "#303F9F",
"materialIndigo-700Rgb": [48, 63, 159],
"materialIndigo-700Hsl": [232, 54, 41]
}