Color code and palette
Shades of Blue
Blue is a versatile family used to communicate clarity, trust and calm. Sky, royal and navy variants provide enough range for links, product interfaces and authoritative brand palettes.
Blue #3B82F6
Color formats
The same base color in common web formats.
HEX
#3B82F6 RGB
rgb(59, 130, 246) HSL
hsl(217, 91%, 60%) OKLCH
oklch(62.0% 0.188 260.0) Blue is a versatile family used to communicate clarity, trust and calm. Sky, royal and navy variants provide enough range for links, product interfaces and authoritative brand palettes.
Shades
| Color | Name | Hex | |
|---|---|---|---|
| Alice Blue | #EFF6FF | ||
| Ice Blue | #DBEAFE | ||
| Baby Blue | #BFDBFE | ||
| Sky Blue | #93C5FD | ||
| Cornflower | #60A5FA | ||
| Blue | #3B82F6 | ||
| Royal Blue | #2563EB | ||
| Cobalt | #1D4ED8 | ||
| Navy | #1E40AF | ||
| Dark Blue | #1E3A8A | ||
| Cyan Light | #ECFEFF | ||
| Cyan Pale | #CFFAFE | ||
| Cyan | #A5F3FC | ||
| Turquoise | #67E8F9 | ||
| Aqua | #22D3EE | ||
| Cerulean | #06B6D4 | ||
| Ocean | #0891B2 | ||
| Teal Blue | #0E7490 | ||
| Deep Cyan | #155E75 | ||
| Dark Cyan | #164E63 |
Triadic color harmony
Three evenly spaced hues create a colorful but balanced starting palette.
Text contrast
These ratios use the WCAG relative luminance formula.
White textNaN:1
Black textNaN:1
Ways to use blue
01
Links and primary interface actions
02
Technology and financial brands
03
Calm backgrounds and information panels