Light Blue color guide
HEX
#ADD8E6
RGB
173, 216, 230
HSL
195°, 53%, 79%
HSV
195°, 25%, 90%
Barely tinted white with a cool cast, light blue behaves like a whisper of blue rather than a statement. #ADD8E6 backgrounds content easily because it retreats from the eye. Pair it with dark type and it suddenly feels crisp and hygienic.
Best for
Email templates, blog headers, and content marketing visuals.
Compare with
Accessibility
Check contrast before using light blue for text-heavy layouts, especially on low-contrast backgrounds.
How does light blue compare to nearby colors?
What is the difference between light blue and heather?
Heather (#B7C3D0) carries less pigment punch than Light Blue (#ADD8E6), so the pair separates by finish as much as hue. Light Blue is more useful when the color itself needs to do some signaling; Heather is easier to keep in longer-running surfaces. Choose light blue when the color needs to register quickly and act like the headline accent; keep heather when the rest of the layout needs a quieter companion.
What color is light blue?
Generic "light blue" appears in hospital scrubs, baby goods, spa aesthetics, and accessible UI themes where contrast with text must be managed carefully.
What is the hex code for light blue?
| Format | Value |
|---|---|
| HEX | #ADD8E6 |
| RGB | rgb(173, 216, 230) |
| HSL | hsl(195°, 53%, 79%) |
| HSV / HSB | hsv(195°, 25%, 90%) |
| CMYK (approx.) | cmyk(25%, 6%, 0%, 10%) |
Convert Light Blue to other color formats
Open the color converter with Light Blue (#ADD8E6) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Light Blue in the color converter →What does light blue mean in design?
Light blue is often associated with cleanliness, softness, and low intensity. Beside baby blue or powder blue, it tends to read as more neutral and less "sweet" or chalky.
How do I use light blue in code?
| CSS (hex) | color: #ADD8E6; |
| CSS (rgb) | color: rgb(173, 216, 230); |
| CSS (hsl) | color: hsl(195, 53%, 79%); |
| RGB % | rgb(68%, 85%, 90%) |
| Tailwind | text-[#ADD8E6] |
| SwiftUI | Color(red: 0.678, green: 0.847, blue: 0.902) |
| UIKit | UIColor(red: 0.678, green: 0.847, blue: 0.902, alpha: 1.0) |
| Android | Color.rgb(173, 216, 230) |
| Compose | Color(0xFFADD8E6) |
| Web Safe | #99CCFF |
Is light blue accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.53:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 13.74:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.53:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 13.74:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does light blue look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with light blue
Charcoal lets light blue stay light and atmospheric while still giving the layout a readable dark value for text and hierarchy.
With a cooler color like light blue, gold adds richness and turns the system toward premium packaging, hospitality, or ceremonial branding.
Cream gives light blue a quieter backdrop and preserves a more natural editorial feel than a colder off-white would.
What colors clash with light blue
With light blue, Neon Green pulls the palette toward LED signage and away from the sky-washed quality that makes the source color usable.
Magenta pushes light blue toward a nightclub or cosmetic register that is hard to square with calmer editorial or product work.
Orange lands abruptly next to light blue and can make the palette feel more promo-coded or team-coded than intended.
Light Gray sits too close to light blue in value, so the palette can wash out before it ever establishes a clear hierarchy.
How should I use light blue in design?
- •Use light blue for soft backgrounds and supporting surfaces rather than foreground text — it creates a gentle atmosphere while keeping the layout open and readable.
- •Pair light blue with warm accents (gold, rust, amber) when you need more energy, or stay in cool territory (navy, silver, sage) for a composed, professional look.
- •Light tones like light blue work best for card backgrounds, section tints, and gentle emphasis — they add color without competing with the content.
What are good light blue palettes?
Design with light blue in Moda
Create a presentation or document using light blue as your accent color. Moda's AI applies your color palette automatically.
Create a design with light blue →What are the shades and tints of light blue?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for light blue?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Powder Blue
Powder Blue sits close to light blue in hue, but its aqua-blue cast changes the mood of the palette even when the contrast shift is small.
Sky Blue
Sky Blue stays very close to light blue in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Baby Blue
Baby Blue is nearly adjacent to light blue in hue; what separates them is intensity, with baby blue reading cleaner and more assertive.
Heather
Heather sits close to light blue on the wheel, but it carries less chroma, which makes it better for steadier surfaces and calmer long-form use than for sharper emphasis and quicker visual pickup.
Ice Blue
Ice Blue stays very close to light blue in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Frequently asked questions
What is the hex code for light blue?
The hex code for light blue is #ADD8E6. In RGB, that's 173 red, 216 green, and 230 blue. The approximate CMYK equivalent is 25% cyan, 6% magenta, 0% yellow, and 10% key (black).
Is light blue a warm or cool color?
Light Blue falls on the cool side of the palette, so warm companions create the clearest contrast while other cool tones keep the system more restrained.
Is light blue better for accents, structure, or surfaces?
Light Blue sits in the usable middle: strong enough to anchor a section or call attention to a key moment, but calm enough to support a broader system when the surrounding values are well managed.
Where does light blue work best in a layout?
Light Blue is better on broad surfaces than in tiny details, so treat it as a background or support color and let darker accents carry the sharp hierarchy.
Is light blue accessible?
Light Blue works better with dark text than white text. Black text reaches 13.74:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More blue colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Blue colors
Compare light blue with other blue tones.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Purple colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.