Baby blue carries the hex code #89CFF0, which resolves to rgb(137, 207, 240) and hsl(199, 77%, 74%). Blue leads green by 33 points and green leads red by 70, which places the hue at 199° in the cyan-leaning stretch of blue.
Baby blue reaches 1.71:1 against white and 12.25:1 against black, so it fails as light-mode text and clears AAA as a dark-text surface. This page covers every code format, the computed palettes, the four elements where it performs, and how it differs from the sky blue it gets swapped with.
What Is the Color Baby Blue?
Baby blue sits at 199° with 77% saturation and 74% lightness. No CSS keyword maps to it, and #89CFF0 is the value most references publish, which makes it a convention rather than a specification.
The full code set for #89CFF0:
- HEX: #89CFF0
- RGB: rgb(137, 207, 240)
- RGBA: rgba(137, 207, 240, 1)
- HSL: hsl(199, 77%, 74%)
- HSB: 199, 43, 94
- CMYK: 43, 14, 0, 6
The HSB reading shows why it looks gentle rather than vivid. Saturation reports 43% in the brightness model against 77% in HSL, and that gap marks a color diluted heavily with white.
The name carries associations the hex doesn’t. Baby blue arrived through twentieth-century nursery convention rather than through color science, which means the word brings context to a design conversation that the number alone doesn’t.
How Does Baby Blue Differ From Sky Blue?
Baby blue and sky blue sit two degrees apart on the color wheel and get used interchangeably in briefs, which is how a design system ends up with two tokens for one color. The distinction is small enough to need stating precisely.
Here’s where each lands:
- Baby blue (#89CFF0): hue 199, saturation 77%, lightness 74%
- Sky blue (#87CEEB): hue 197, saturation 71%, lightness 72%
- Light blue (#ADD8E6): hue 195, saturation 53%, lightness 79%
- Powder blue (#B0E0E6): hue 187, saturation 52%, lightness 80%
- Light sky blue (#87CEFA): hue 203, saturation 92%, lightness 75%
Baby blue and sky blue differ by two degrees of hue and two points of lightness. Placed side by side the difference is visible, and in isolation almost nobody could name which is which.
Baby blue is marginally more saturated and marginally lighter. That combination gives it a slightly cleaner, more synthetic quality where sky blue reads a touch more atmospheric.
Their contrast figures are effectively identical at 1.71:1 and 1.74:1. Anyone choosing between them for accessibility reasons is choosing on the wrong basis, since neither works as a foreground on white.
The practical guidance is to pick one and delete the other. Two tokens two degrees apart create ambiguity in handoff and deliver no benefit.
How Does Baby Blue Appear on Digital Screens?
Baby blue renders consistently across panels because no channel sits at an extreme. That stability is a real advantage over saturated blues, which clip on narrow-gamut displays.
The measured values set the constraints:
- #89CFF0 on white: 1.71:1, fails everything
- #89CFF0 on black: 12.25:1, passes AAA
- Black text on #89CFF0: 12.25:1, passes AAA
- White text on #89CFF0: 1.71:1, fails
- Dark variant #679BB4 on white: 3.03:1, large text and non-text only
Direction of contrast governs every decision. Baby blue works as a background for dark text and fails as a foreground on light surfaces, which reverses the instinct most designers bring to a blue.
The dark variant just clears one threshold. #679BB4 at 3.03:1 covers borders, icons, and large headings while still failing body copy by a wide margin.
The shade at #446878 reaches 6.3:1 and passes AA. That value is what a layout needs when a blue in this family has to be read on white.
Ambient light shifts it noticeably. Baby blue picks up a green cast under warm indoor lighting and a violet cast under cool office lighting, which matters because the color’s whole appeal is its evenness.
What Are the Shades of Baby Blue?
Shades come from mixing black into #89CFF0 while holding hue near 199°:
- #78B5D2
- #679BB4
- #568196
- #446878
- #334E5A
- #22343C
- #111A1E
Two steps carry the practical weight. #679BB4 is the first that clears 3:1 for borders and large text, and #446878 is the first that passes AA for body copy at 6.3:1.
Tints run toward white through #93D3F1, #9ED8F2, #A8DCF4, #B2E0F5, #BCE4F6, #C6E8F8, #D1ECF9, and #DBF0FA. Those pale steps handle banner fills and selected-row backgrounds.
Named neighbors sit very close and all fail on white, as covered in the disambiguation above:
- Sky blue (#87CEEB): two degrees away, 1.74:1
- Light sky blue (#87CEFA): more saturated, 1.72:1
- Light blue (#ADD8E6): lighter and softer, 1.53:1
- Powder blue (#B0E0E6): greener and paler, 1.43:1
- Cornflower blue (#6495ED): far deeper and more violet, 2.97:1
What UI Elements Work Best with Baby Blue?
Baby blue belongs on surfaces and accents that host dark content. The 12.25:1 for black text on it opens the surface role, and the 1.71:1 against white closes the foreground one.
Link text, body copy, functional borders at the base value, and any button with a white label all fall outside its range. Four element types remain where baby blue genuinely performs.
Backgrounds and Surface Tints
Baby blue works as a page or section background with white cards on top. The 1.71:1 separation reads as depth rather than as a color change, and dark text on it clears AAA.
Its calm register suits health, education, and family products. The color carries reassurance in a way a neutral gray can’t, which is why it appears so often in those categories.
Lighter tints suit large areas. #DBF0FA across a full viewport delivers the same character with less visual weight than the base.
Info Banners and Status Badges
Informational states are baby blue’s clearest semantic job. Tips, notices, and neutral system messages sit at the bottom of the severity ladder, below error, warning, and success.
A banner built from a tint reads better than one built from the base. #DBF0FA with #334E5A text and a #679BB4 left border gives a legible notice where a solid fill would flatten.
Distinction from your success color matters. Blue and green sit close enough that a rushed user reads them as one state, so an icon should separate them.
Buttons and CTAs with Dark Labels
Baby blue buttons work when the label sits at near-black. At 12.25:1 the text clears AAA, while white on the same fill fails at 1.71:1.
Secondary actions suit it better than primary ones. The color lacks the visual weight for a primary CTA on a light page, so a deeper blue takes that slot.
Outline variants need the shade ramp. A #89CFF0 border on white misses the 3:1 minimum, so the stroke drops to #679BB4.
Dark Mode Accents
Dark mode is where baby blue stops fighting the math. The bright variant #4AB6E8 on the computed surface #0C171D reaches 7.91:1 and clears AAA, so it carries small text, icons, and links.
Lightness should come down slightly when a token ports across. The value that reads as gentle on white looks glaring against near-black, and stepping down the tint ramp restores the register.
What Are the Best Baby Blue Color Palettes for UI?
Every palette below comes from rotating hue around #89CFF0 at fixed saturation and lightness. Because lightness sits at 74%, most produce pale sets rather than a light-and-dark pair.
Monochromatic
The monochromatic scheme holds hue at 199° and moves lightness: #89CFF0, #1A91C8, and #DBF0FA. This is the most useful of the five, since the dark step gives a working accent.
#1A91C8 reaches 3.2:1 on white and covers large text and non-text elements. Mapping places it on interactive elements, the base on fills, and the tint on surfaces.
Analogous
Analogous pulls neighbors 30° in each direction: #89CFF0, #899CF0, and #89F0DD. A periwinkle-blue and an aquamarine flanking the base, all at matched lightness.
Cohesive and hierarchy-free. Three values at identical lightness need a dark neutral alongside them or the layout has no anchor.
Complementary
The complement sits opposite at 19°: #89CFF0 paired with #F0AA89, a soft peach. Warm against cool with no contrast separation, since both sit at 74% lightness.
Adjacent surfaces work better than foreground and background. Peach text on baby blue fails, and a peach card beside a blue card reads clearly.
Triadic
The triadic scheme gives you #89CFF0, #F089CF, and #CFF089: baby blue, a soft pink, and a pale yellow-green. Three distinct hues at matched lightness, which makes an even category system.
Verification under simulation matters here. Matched-lightness triads converge faster under color vision deficiency than saturated sets.
Split-Complementary
Split-complementary softens the pairing: #89CFF0, #F0899C, and #F0DD89. Baby blue with a rose and a warm sand, and the most flexible of the five for a full interface.
A near-black text color anchors it. Visily’s theme tools can generate the shade ladder beneath each value so the dark partners come out accessible rather than mixed by hand.
Which Colors Are Similar to Baby Blue?
Five named colors sit close enough to #89CFF0 to substitute for it:
- Sky blue (#87CEEB): two degrees away and effectively identical, 1.74:1
- Light sky blue (#87CEFA): more saturated, 1.72:1
- Light blue (#ADD8E6): lighter and softer, 1.53:1
- Powder blue (#B0E0E6): greener and paler, 1.43:1
- Cornflower blue (#6495ED): far deeper and more violet, 2.97:1
Powder blue is the useful distinction in the group. At 187° it carries noticeably more green, which makes it the one member that reads as a different color rather than as a variant.
Cornflower blue solves a different problem. When a layout needs a blue with presence rather than atmosphere, its 2.97:1 puts it just under the non-text floor and well ahead of the pale family.
Which Colors Pair Best with Baby Blue?
Near-black is baby blue’s essential partner. At 12.25:1 it’s the text color that makes every baby blue surface work.
Deep blue from the monochromatic scheme supplies the hierarchy. #1A91C8 shares the base’s hue, clears 3:1 on white, and handles the interactive role the base can’t.
Warm neutrals prevent the clinical problem. Cream and warm sand keep baby blue reading as considered, while cool grays make it look like a hospital form.
Soft peach from the complementary direction balances it. That pairing reads as gentle rather than corporate, which suits the family and education contexts where the color belongs.
The 60-30-10 split applies as follows:
- 60% neutral: white or off-white surfaces
- 30% baby blue and its tints: banners, fills, and secondary surfaces
- 10% deep blue: links, primary actions, and interactive elements
Which Colors Should You Avoid Pairing with Baby Blue?
White fails first. At 1.71:1 a baby blue element on white has no perceptible edge, so borders built that way disappear on dim screens and in compressed screenshots.
Two computed near-clashes cause the next problem: #89A5F0 and #89F0E5. Both sit 25° away at identical lightness, differing in hue with no luminance difference.
Sky blue is the specific trap, and the most common one. Two colors two degrees apart placed adjacent read as a rendering error rather than as a design choice.
Pale green at similar lightness is the accessibility failure. Under tritanopia baby blue shifts toward gray-green, which collapses its separation from a light green in the same layout.
Does Baby Blue Meet Accessibility Standards?
Baby blue fails as a foreground on white and passes as a background for dark text. The 1.71:1 measurement falls below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Baby blue lands as follows across the common pairings:
- #89CFF0 on white: 1.71:1, fails AA and the 3:1 non-text floor
- White on #89CFF0: 1.71:1, fails
- Black on #89CFF0: 12.25:1, passes AAA
- #679BB4 on white: 3.03:1, passes for large text and non-text
- #4AB6E8 on #0C171D: 7.91:1, passes AAA
The black-on-baby-blue result is what keeps the color usable. Any baby blue surface with a dark label is compliant at every size.
Tritanopia is the relevant deficiency rather than the more common red-green forms. Blue-yellow deficiency shifts baby blue toward a pale gray-green, which collapses its separation from light greens and from mid-grays.
A second cue should back up the hue in any informational system. An icon or a label preserves the meaning when the color doesn’t survive.
How Can You Convert Baby Blue Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same pale blue from a different angle:
- HEX #89CFF0: the default in design files and CSS
- RGB rgb(137, 207, 240): three ascending channels, the signature of a cool color
- RGBA rgba(137, 207, 240, 1): adds alpha for tinted overlays and selection fills
- HSL hsl(199, 77%, 74%): separates hue from saturation and lightness
- HSB 199, 43, 94: the picker model, reporting saturation very differently
- CMYK 43, 14, 0, 6: cyan-dominant coverage for print
The ascending channel pattern is a quick diagnostic. When blue exceeds green and green exceeds red, the color is cool, and reversing the order gives a warm one.
HSL is what makes the ramp workable. Holding hue at 199° and stepping lightness generates the whole family, including the AA-compliant #446878 that the base can never be.
CMYK holds up unusually well. The 43, 14, 0, 6 mix sits comfortably inside the process gamut, so printed baby blue tracks the screen more closely than most colors, though paper warmth shifts it slightly.
Wrapping Up
Baby blue is a surface color and an informational color, and it’s close enough to sky blue that a design system should carry one of them rather than both. #89CFF0 works for banner fills, canvases, and secondary buttons with near-black labels, #679BB4 makes a border perceptible, #446878 is what a blue in this family needs to be read on white, and #4AB6E8 carries dark mode at AAA.
Those steps don’t need to be tested one pairing at a time. Open Visily and use its AI-powered design tools to generate the baby blue tint and shade ladder, accessible info states, and matched accent pairings across the entire design in one pass.
