Sky Blue meaning and palette guide
HEX
#87CEEB
RGB
135, 206, 235
HSL
197°, 71%, 73%
HSV
197°, 43%, 92%
This is the blue people name when they mean a pleasant day — not storm clouds, not deep water. #87CEEB carries open air and daylight without the chill of icier pastels. In palettes it softens contrast while still reading clearly as sky.
Best for
Marketing websites, social media graphics, and campaign landing pages.
Compare with
Accessibility
Check contrast before using sky blue for text-heavy layouts, especially on low-contrast backgrounds.
How does sky blue compare to nearby colors?
What is the difference between sky blue and powder blue?
Sky Blue (#87CEEB) and Powder Blue (#B0E0E6) may look neighboring at first glance, yet their surface character diverges once they sit next to whites, charcoals, and other real layout neutrals. The practical difference is not raw contrast so much as project fit: Sky Blue reads more naturally in bright chroma, while Powder Blue fits more easily into working chroma. Choose sky blue when the surrounding system aligns better with bright chroma, and move to powder blue when the stronger contextual fit is working chroma.
What color is sky blue?
The name references clear daytime sky. It is common in children's products, wellness branding, and weather apps. "Sky blue" also names a Crayola crayon and many paint lines.
What is the hex code for sky blue?
| Format | Value |
|---|---|
| HEX | #87CEEB |
| RGB | rgb(135, 206, 235) |
| HSL | hsl(197°, 71%, 73%) |
| HSV / HSB | hsv(197°, 43%, 92%) |
| CMYK (approx.) | cmyk(43%, 12%, 0%, 8%) |
Convert Sky Blue to other color formats
Open the color converter with Sky Blue (#87CEEB) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Sky Blue in the color converter →What does sky blue mean in design?
Sky blue is often associated with calm, optimism, and leisure. Next to cerulean or ocean blue, it tends to read as lighter, more decorative, and less corporate or maritime.
How do I use sky blue in code?
| CSS (hex) | color: #87CEEB; |
| CSS (rgb) | color: rgb(135, 206, 235); |
| CSS (hsl) | color: hsl(197, 71%, 73%); |
| RGB % | rgb(53%, 81%, 92%) |
| Tailwind | text-[#87CEEB] |
| SwiftUI | Color(red: 0.529, green: 0.808, blue: 0.922) |
| UIKit | UIColor(red: 0.529, green: 0.808, blue: 0.922, alpha: 1.0) |
| Android | Color.rgb(135, 206, 235) |
| Compose | Color(0xFF87CEEB) |
| Web Safe | #99CCFF |
Is sky blue accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.74:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 12.06:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.74:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 12.06: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 sky blue look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with sky blue
With sky blue on broader surfaces, charcoal adds enough depth to keep the system legible without the harsher edge of pure black.
Gold warms sky blue enough to keep the palette from feeling chilly or overly technical, while still reading intentional rather than decorative-for-its-own-sake.
Cream lets sky 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 sky blue
Neon Green beside sky blue tends to vibrate on bright displays, so the pair reads more like a HUD effect than a considered brand palette.
With sky blue, magenta introduces a second emotional story instead of reinforcing the first one, so the palette can feel internally split.
How should I use sky blue in design?
- •Use sky 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.
- •Pair sky blue with warm accents (gold, rust, amber) when you need more energy, or stay in cool territory (navy, silver, sage) for a composed, professional look.
- •Sky Blue is a safe choice for corporate decks, SaaS dashboards, and enterprise UI — contexts where trustworthiness is the first design requirement.
What are good sky blue palettes?
Design with sky blue in Moda
Create a presentation or document using sky blue as your accent color. Moda's AI applies your color palette automatically.
Create a design with sky blue →What are the shades and tints of sky blue?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for sky 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
Baby Blue
Baby Blue sits close to sky 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.
Light Blue
Light Blue stays very close to sky 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.
Powder Blue
Powder Blue is almost the same hue as sky blue; the real difference is value, with powder blue feeling more open and surface-friendly.
Electric Blue
Electric Blue is nearly adjacent to sky blue in hue; what separates them is intensity, with electric blue reading cleaner and more assertive.
Ice Blue
Ice Blue occupies a similar depth to sky blue, though it pushes the family toward a more cool reading and a different material feel.
Frequently asked questions
What is the hex code for sky blue?
The hex code for sky blue is #87CEEB. In RGB, that's 135 red, 206 green, and 235 blue. The approximate CMYK equivalent is 43% cyan, 12% magenta, 0% yellow, and 8% key (black).
Is sky blue a warm or cool color?
Sky Blue reads as cool. It settles naturally beside blues, greens, silver, and charcoal, and feels more animated when paired with warm accents like gold, coral, or rust.
Where does sky blue work best in a layout?
Sky Blue is flexible enough to move between accents, section blocks, and supporting roles depending on the contrast around it. It works best when the rest of the palette gives it a clear job instead of asking it to do everything at once.
How should I use sky blue in a design?
Sky Blue works as a soft background or supporting color for slide canvases, section panels, and marketing surfaces. Use dark text for readability and reserve stronger accents for buttons, charts, and key takeaways.
Can I use sky blue for text or backgrounds?
Sky Blue works better with dark text than white text. Black text reaches 12.06: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 sky 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.