HEX
#03A9F4Primary tokenDesign System Color Reference
Material Light Blue 500 Color Code
Material Light Blue 500·#03A9F4
Blue FamilyCoolMid toneHigh saturationoklch(69.9% 0.157 239)
RGB
rgb(3, 169, 244)Screen valuesHSL
hsl(199 98% 48%)Hue and lightnessCMYK
99, 31, 0, 4Print handoffLAB
66, -10, -47Perceptual referenceOKLCH
oklch(69.9% 0.157 239)Modern perceptualMaterial Light Blue 500 is a brighter published blue in the Material Design palette at #03A9F4. Use it when you need a fresher, lighter Material accent for mobile UI, cards, charts, onboarding, and product surfaces that should feel more open than Material Blue 500.
Best text colorDark text
Body text contrast6.52:1
Best UseFresh app accents, mobile surfaces, and brighter Material-style highlights
Tonal Scale
100#D2F0FD
300#8BD7FA
500#30B8F6
600#03A9F4
800#027AB0
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
2.63:1Needs more separation
Dark text on this color
Large headings and selective UI.
6.52:1Safe for body text
This color on light surface
Links, borders, and icons on light UI.
2.50:1Needs more separation
Best text colorDark textContrast 6.52:1
Professional Reference
OKLCHoklch(69.9% 0.157 239)
Relative Luminance0.3493
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 A400Tailwind Sky 500Material Light Blue 600
Accessibility Matrix
White text on this color
White text placed on the current color.
2.63:1Needs more separation
Dark text on this color
Dark text or headings on the current color.
6.52:1AA
This color on light surface
Use this color for links, strokes, or icons on light UI.
2.50:1Needs more separation
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
6.52:1AA
Best text colorDark textContrast 6.52:1 · AA
Where It Works
- Mobile surfaces, chart accents, and brighter app highlights.
- Lighter Material tone for fresher product UI.
- Pairs with white, navy neutrals, and deeper blue anchors.
Reference Notes
Last Updated
2026-06-09
Source Library
Material Design Colors
Methodology
Verified source values + site guidance
Color Notes
Material Light 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-light-blue-500: #03A9F4;
--color-material-light-blue-500-rgb: 3 169 244;
}class="bg-[#03A9F4] text-white"
class="hover:bg-[#027AB0] ring-1 ring-[#03A9F4]"{
"materialLightBlue-500": "#03A9F4",
"materialLightBlue-500Rgb": [3, 169, 244],
"materialLightBlue-500Hsl": [199, 98, 48]
}