Sky blue color: code #87CEEB

Sky blue

#87CEEB

Color codes

  • HEX#87CEEB
  • RGBrgb(135, 206, 235)
  • HSLhsl(197, 71%, 73%)
  • HSVhsv(197, 43%, 92%)
  • CMYKcmyk(43%, 12%, 0%, 8%)
  • LABlab(79.2% -14.8 -21.3)
  • OKLCHoklch(81.5% 0.082 225.8)

About the color Sky blue

Sky blue has the HEX code #87CEEB, which corresponds to rgb(135, 206, 235) in the RGB model. On the color wheel its hue sits at 197°, with 71% saturation and 73% lightness (hsl(197, 71%, 73%)).

Because of its hue it reads as a cool color: it tends to feel calm and distant, and it visually “recedes” in a composition.

As a background it calls for dark text: black reaches a 12.05:1 contrast ratio on it, versus 1.74:1 for white.

For print, the approximate conversion is cmyk(43%, 12%, 0%, 8%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Sky blue

Complementary

#87CEEB · #EBA589

Analogous

#89EBD6 · #87CEEB · #899EEB

Triadic

#87CEEB · #EB89CF · #CFEB89

Tetradic

#87CEEB · #D689EB · #EBA589 · #9EEB89

Split-complementary

#87CEEB · #EB899E · #EBD689

Monochromatic

#23A0D1 · #5EBEE4 · #87CEEB · #CBEAF6 · #FFFFFF

Sky blue with white and black text

White text Aa Bb Cc 123
1.74:1 · fails WCAG
Black text Aa Bb Cc 123
12.05:1 · AAA

Test other pairs in the contrast checker

Clear sky, in code

Sky blue is the blue of a cloudless day and is usually associated with calm, lightness and open space. It shows up naturally in travel brands, sunscreen, cleaning products and nurseries, because it suggests air and freshness. Like any color association, it shifts with context: in a hospital the same tone reads as clinical; in a clothing store it reads as casual and summery.

The reference value, #87CEEB, is the CSS skyblue keyword: a 197° hue, moderate saturation and high lightness. That is why it stays soft even across large areas.

The most common mistake: white text

White text on #87CEEB has a contrast ratio of only 1.7:1, far below the 4.5:1 WCAG requires for normal text. On sky-blue buttons and banners, use black text (about 12:1) or navy blue (#000080, about 9:1). Test your pair in the contrast checker.

In dark mode, sky blue makes a good accent on near-black backgrounds, since it is light enough to read comfortably. It is one of the few blues that work better in a dark theme than a light one.

A sky blue color palette

ColorHEXEffect
White#FFFFFFbeachy and airy
Navy blue#000080monochrome with clear hierarchy
Coral#FF7F50warm complement, good for highlights
Cream#FFFDD0cozier, slightly vintage

Sky blue or baby blue?

In practice they are almost the same color. Baby blue (#89CFF0) has a 199° hue and is slightly more saturated; sky blue (#87CEEB) sits at 197°. The difference is more about naming and use than pigment: “sky blue” turns up in interiors and fashion, “baby blue” in nurseries and baby showers. If you need a light blue with more presence, push the saturation or look toward turquoise.

For print, a straight conversion of #87CEEB gives roughly cmyk(42%, 12%, 0%, 8%). On uncoated paper, pale tones like this one tend to look a little flatter than on screen, so ask for a proof before running invitations, stationery or packaging. To compare values quickly, the color converter shows both systems side by side.

How to use it in CSS

:root {
  --color-sky-blue: #87CEEB;
  --color-sky-blue-rgb: 135, 206, 235;
}

.elemento {
  background-color: var(--color-sky-blue);
  color: #000000;
}

Similar colors

Use Sky blue in our tools