#89CFF0Baby Blue hex code: #89CFF0 · RGB 137, 207, 240. Also called light baby blue, pale blue.
Baby blue is a light, gentle sky blue. Its name comes from the 20th-century convention of dressing baby boys in pale blue. The common reference value is #89CFF0, a little more saturated than CSS lightblue.
Beyond nurseries and baby showers, baby blue works for healthcare, cleaning and water brands, airy SaaS backgrounds and summer fashion. It reads as calm, clean and trustworthy.
Baby blue is too light for white text, and it can look washed out at large sizes on white pages. Ground it with navy or charcoal text, or pair it with butter yellow, blush pink or white for a soft palette.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#89CFF0rgb(137, 207, 240) · reference#BFE3F5rgb(191, 227, 245) · HueWiz pick#A7C7E7rgb(167, 199, 231) · HueWiz pick#5BAEDBrgb(91, 174, 219) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with baby blue's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around baby blue.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#EDF9FF · text #0F222A · link #317896Spring collection
Designed around baby blue.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#07161D · text #E8F0F4 · link #89CFF0Hand-picked combinations that work with baby blue. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on baby blue | 1.71:1 | Fail | Fail |
| Black text on baby blue | 12.24:1 | AAA | AAA |
| Baby Blue text on white | 1.71:1 | Fail | Fail |
| Baby Blue text on near-black #111111 | 11.01:1 | AAA | AAA |
| White text on deeper baby blue #377E9C | 4.53:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #89CFF0. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-baby-blue-50: #EDF9FF;
--color-baby-blue-100: #D7F2FF;
--color-baby-blue-200: #ADE4FF;
--color-baby-blue-300: #88CDEE;
--color-baby-blue-400: #74AFCC;
--color-baby-blue-500: #6093AA;
--color-baby-blue-600: #4D778A;
--color-baby-blue-700: #3D5F6F;
--color-baby-blue-800: #2D4854;
--color-baby-blue-900: #1F323B;
--color-baby-blue-950: #111E24;
--color-baby-blue: #89CFF0;
}:root {
--baby-blue: #89CFF0;
--baby-blue-rgb: 137 207 240;
--baby-blue-light: #D7F2FF;
--baby-blue-dark: #2D4854;
}
.btn-baby-blue {
background: #377E9C;
color: #000000;
}Need semantic roles (surface, text, primary, accent) and exports? Open baby blue in the Tailwind color generator.
#89CFF0 is the value HueWiz uses for baby blue; it equals rgb(137, 207, 240). Other common versions include #BFE3F5 (pale baby blue), #A7C7E7 (powder baby blue), #5BAEDB (deeper baby blue).
With an HSL hue of 199° and 77% saturation, baby blue reads as a cool cyan.
Use dark text. White on #89CFF0 measures 1.71:1 and black measures 12.24:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #377E9C.
Try nursery soft (#89CFF0, #FFF4C2, #FFFFFF); clean & trusted (#F4FAFE, #BFE3F5, #89CFF0); baby blue & navy (#89CFF0, #1D3557, #F1FAEE). Each palette above can be copied or opened in the HueWiz studio.
Baby Blue isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.