HEX
#2196F3Primary tokenDesign System Color Reference
Material Blue 500 Color Code
Material Blue 500·#2196F3
Blue FamilyCoolMid toneHigh saturationoklch(65.8% 0.169 249)
RGB
rgb(33, 150, 243)Screen valuesHSL
hsl(207 90% 54%)Hue and lightnessCMYK
86, 38, 0, 5Print handoffLAB
60, 2, -55Perceptual referenceOKLCH
oklch(65.8% 0.169 249)Modern perceptualMaterial Blue 500 is the core published blue in the Material Design palette at #2196F3. Use it when you need a familiar app-primary blue for buttons, navigation, mobile surfaces, and product systems that follow Material-like visual language.
Best text colorDark text
Body text contrast5.49:1
Best UseDesign system primaries, product CTAs, and modern app accents
Tonal Scale
100#D7ECFD
300#99CFF9
500#49A9F5
600#2196F3
800#186CAF
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
3.12:1Large text / UI only
Dark text on this color
Large headings and selective UI.
5.49:1Safe for body text
This color on light surface
Links, borders, and icons on light UI.
2.97:1Needs more separation
Best text colorDark textContrast 5.49:1
Professional Reference
OKLCHoklch(65.8% 0.169 249)
Relative Luminance0.2861
Source TypeDesign System Color
Classification
Blue FamilyCoolMid toneHigh 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
Material Light Blue A700Material Blue 600Ant Design Blue 5
Accessibility Matrix
White text on this color
White text placed on the current color.
3.12:1Large text / UI only
Dark text on this color
Dark text or headings on the current color.
5.49:1AA
This color on light surface
Use this color for links, strokes, or icons on light UI.
2.97:1Needs more separation
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
5.49:1AA
Best text colorDark textContrast 5.49:1 · AA
Where It Works
- Primary buttons, app bars, and modern product accents.
- Stable design-system blue for production UI.
- Pairs with white, slate neutrals, and lighter Material blues.
Reference Notes
Last Updated
2026-06-09
Source Library
Material Design Colors
Methodology
Verified source values + site guidance
Color Notes
Material Blue 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-blue-500: #2196F3;
--color-material-blue-500-rgb: 33 150 243;
}class="bg-[#2196F3] text-white"
class="hover:bg-[#186CAF] ring-1 ring-[#2196F3]"{
"materialBlue-500": "#2196F3",
"materialBlue-500Rgb": [33, 150, 243],
"materialBlue-500Hsl": [207, 90, 54]
}