What colors go well with baby blue?

Baby Blue pairs with its complementary colour #F0AA89 and its triad partners. See the auto-generated palettes on this page, or use the colour picker's harmony tool.

Baby Blue Color — Hex Code #89CFF0, RGB, Palettes & CSS

Q: What is the hex code for baby blue?

Baby Blue is commonly #89CFF0, which is rgb(137, 207, 240). Like most descriptive colour names it covers a small range, but this is a widely used value.

Baby Blue colour codes

Hex

#89CFF0

RGB

rgb(137, 207, 240)

HSL

hsl(199, 77%, 74%)

HSV

hsv(199, 43%, 94%)

OKLCH

oklch(0.82 0.08 229)

CMYK

cmyk(43%, 14%, 0%, 6%)

Complementary palette

Baby Blue with its opposite on the colour wheel.

#89CFF0

rgb(137, 207, 240)

#F0AA89

rgb(240, 170, 137)

Triad palette

Baby Blue with two evenly-spaced partners.

#89CFF0

rgb(137, 207, 240)

#F089CF

rgb(240, 137, 207)

#CFF089

rgb(207, 240, 137)

Monochromatic palette

Lighter and darker versions of baby blue at the same hue.

#456879

rgb(69, 104, 121)

#6092A9

rgb(96, 146, 169)

#7CBBD9

rgb(124, 187, 217)

#90DAFD

rgb(144, 218, 253)

Lighter tints

Baby Blue toward white.

#89CFF0

rgb(137, 207, 240)

#9AD6F2

rgb(154, 214, 242)

#ABDDF4

rgb(171, 221, 244)

#BCE4F6

rgb(188, 228, 246)

#CCEAF9

rgb(204, 234, 249)

#DDF1FB

rgb(221, 241, 251)

#EEF8FD

rgb(238, 248, 253)

#FFFFFF

rgb(255, 255, 255)

Darker shades

Baby Blue toward black.

#89CFF0

rgb(137, 207, 240)

#75B1CE

rgb(117, 177, 206)

#6294AB

rgb(98, 148, 171)

#4E7689

rgb(78, 118, 137)

#3B5967

rgb(59, 89, 103)

#273B45

rgb(39, 59, 69)

#141E22

rgb(20, 30, 34)

#000000

rgb(0, 0, 0)

About baby blue

A light, gentle blue with a soft, airy feel. Long associated with calm, freshness and (traditionally) baby boys, it is popular in pastel palettes. The value shown here (#89CFF0) is a widely used representation — descriptive colour names like this cover a small range rather than one fixed code, so feel free to nudge it in the colour picker to suit your project.

Palettes that work with baby blue

The complementary colour (#F0AA89) sits opposite baby blue on the wheel for high contrast, while the triad spreads three balanced hues. For subtle, layered designs the monochromatic set keeps the same hue at different lightness. All are generated automatically above — click any swatch to copy.

Using baby blue in your design

For CSS, paste #89CFF0 or the oklch(0.82 0.08 229) value, or download the ready-made baby-blue.css file above — it includes a full 50–950 token scale. Always check contrast before using baby blue behind text.

What is the hex code for baby blue?

Baby Blue is commonly #89CFF0 (rgb(137, 207, 240)). It covers a small range, but this is a widely used value.

What colours go well with baby blue?

Its complementary colour #F0AA89 and the triad/monochromatic palettes shown above. Use the picker's harmony tool to explore more.

Baby Blue colour

Baby Blue colour codes

Complementary palette

Triad palette

Monochromatic palette

Lighter tints

Darker shades

About baby blue

Palettes that work with baby blue

Using baby blue in your design

Popular colours

Color tools