UI Shades

A study in blue

Light Blue

#ADD8E6

Family
Blue
L
0.856
C
0.049
H
220°

Notes

Light Blue in CSS is a pale, slightly cyan-leaning sky blue. The hex is lighter and a touch cooler than Sky Blue, with low chroma that makes it suitable for large-area surfaces without visual fatigue. Wellness, baby goods, and tech-product branding use it as a calming background. Pair with deep navy for type, with white for layered surfaces, or with warm coral for unexpected accent contrast. Against pure white it provides enough separation to read as a distinct layer for product cards or panels. Body text against Light Blue should use a deep charcoal or near-black for legible contrast.

#add8e6
Light Blue
Light Blue
#add8e6
oklch(0.856 0.049 219.65)
rgb(173 216 230)
hsl(194.7 53.3% 79%)
Share
#f3fcff
#e7f7fd
#ceebf5
#add8e6
#8bbece
#6094a5
#477c8c
#356675
#224a56
#13323b
#071a20

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Light Blue

Cross-reference
Q&A

Frequently asked questions

What is Light Blue?

Light Blue in CSS is a pale, slightly cyan-leaning sky blue. The hex is lighter and a touch cooler than Sky Blue, with low chroma that makes it suitable for large-area surfaces without visual fatigue. Its hex code is #ADD8E6.

What are the tints and shades of Light Blue?

uishades builds an 11-step OKLCH ramp for Light Blue (#ADD8E6) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Light Blue?

Its complementary color is #EDC6B8. Triadic partners are #E7C4DA and #D7D1AD; analogous neighbours are #B8D3EF and #ACDBD7.

What are the OKLCH and RGB values of Light Blue?

Light Blue is #ADD8E6 - OKLCH 0.856 0.049 220°, rgb(173 216 230), in the blue family.