What color is Baby Blue?
HEX
#89CFF0
RGB
137, 207, 240
HSL
199°, 77%, 74%
HSV
199°, 43%, 94%
A nursery staple that still works in fashion and packaging when the goal is gentle reassurance. #89CFF0 sits in the pastel band where blue feels cuddly rather than corporate. On product, it often signals "for infants" even when copy does not.
Best for
Product launches, promotional banners, and e-commerce storefronts.
Compare with
Accessibility
Check contrast before using baby blue for text-heavy layouts, especially on low-contrast backgrounds.
How does baby blue compare to nearby colors?
What is the difference between baby blue and powder blue?
Powder Blue (#B0E0E6) carries less pigment punch than Baby Blue (#89CFF0), so the pair separates by finish as much as hue. Baby Blue pushes the palette toward sharper emphasis, while Powder Blue leaves more room for typography, photography, or adjacent accents. Start with baby blue when the palette wants more bright chroma; switch to powder blue when the better fit is working chroma.
What color is baby blue?
Widely used in infant apparel, shower invitations, and confectionery. The term is cultural shorthand in Western markets for newborn-themed design.
What is the hex code for baby blue?
| Format | Value |
|---|---|
| HEX | #89CFF0 |
| RGB | rgb(137, 207, 240) |
| HSL | hsl(199°, 77%, 74%) |
| HSV / HSB | hsv(199°, 43%, 94%) |
| CMYK (approx.) | cmyk(43%, 14%, 0%, 6%) |
Convert Baby Blue to other color formats
Open the color converter with Baby Blue (#89CFF0) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Baby Blue in the color converter →What does baby blue mean in design?
Baby blue is often associated with innocence, tenderness, and gendered baby aesthetics in some regions. Compared with light blue or ice blue, it tends to read as warmer, more playful, and more explicitly "nursery."
How do I use baby blue in code?
| CSS (hex) | color: #89CFF0; |
| CSS (rgb) | color: rgb(137, 207, 240); |
| CSS (hsl) | color: hsl(199, 77%, 74%); |
| RGB % | rgb(54%, 81%, 94%) |
| Tailwind | text-[#89CFF0] |
| SwiftUI | Color(red: 0.537, green: 0.812, blue: 0.941) |
| UIKit | UIColor(red: 0.537, green: 0.812, blue: 0.941, alpha: 1.0) |
| Android | Color.rgb(137, 207, 240) |
| Compose | Color(0xFF89CFF0) |
| Web Safe | #99CCFF |
Is baby blue accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.71:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 12.25:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.71:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 12.25: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 baby blue look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with baby blue
Charcoal balances baby blue by turning the palette into a usable light-dark system rather than a field of soft midtones.
Gold gives baby blue a warmer highlight, which helps the palette feel more tactile and less screen-native than it would with only neutrals.
Cream lets baby blue stay expressive without turning the whole composition stark; the result feels closer to editorial or packaging work than to raw UI default.
What colors clash with baby blue
With baby blue, Neon Green pulls the palette toward LED signage and away from the sky-washed quality that makes the source color usable.
Magenta remaps baby blue too aggressively, dragging it away from healthcare, airy product surfaces, and calm interfaces and into a brighter, more performative palette.
How should I use baby blue in design?
- •Use baby blue for buttons, badges, and chart accents where it can stand out. Test text contrast with WCAG tools before using it for body copy on light backgrounds.
- •Warm touches like gold or coral bring out baby blue's cooler character by contrast, while staying with cool neighbors creates a calmer, more unified feel.
- •Baby Blue's high saturation makes it most effective in small doses — buttons, chart highlights, notification badges, and social media accents.
What are good baby blue palettes?
Design with baby blue in Moda
Create a presentation or document using baby blue as your accent color. Moda's AI applies your color palette automatically.
Create a design with baby blue →What are the shades and tints of baby blue?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for baby 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
Sky Blue
Sky Blue sits close to baby 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.
Light Blue
Light Blue is nearly adjacent to baby blue in hue; what separates them is intensity, with light blue reading dustier and easier to extend across a layout.
Powder Blue
Powder Blue stays very close to baby blue in hue, but it lands lighter, which makes it better for backgrounds, tints, and softer supporting areas than for accents, stronger hierarchy, and firmer structure.
Electric Blue
Electric Blue sits close to baby blue on the wheel, but it carries more pigment pressure, which makes it better for faster emphasis and brighter accent work than for broader coverage and quieter supporting roles.
Heather
Heather sits close to baby 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.
Frequently asked questions
What is the hex code for baby blue?
The hex code for baby blue is #89CFF0. In RGB, that's 137 red, 207 green, and 240 blue. The approximate CMYK equivalent is 43% cyan, 14% magenta, 0% yellow, and 6% key (black).
Is baby blue a warm or cool color?
Baby 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.
Should baby blue lead the palette or stay in supporting roles?
Baby Blue has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does baby blue work best in a layout?
Baby 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 baby blue accessible?
Baby Blue works better with dark text than white text. Black text reaches 12.25: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 baby 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.