Color guide · Blue & blue-green colors
Sky Blue Color
Sky blue is a pale blue that leans toward cyan. It works as a light surface or a distant landscape color, with dark foreground details. It is not a single universal measurement of the sky.
Sky Blue color codes
#87CEEBrgb(135, 206, 235)hsl(197.4, 71.4%, 72.5%)skyblueRGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗
The name & the reference
What makes sky blue interesting?
CSS skyblue is #87CEEB. Natural sky and water references change with conditions, so the keyword is best treated as a design anchor. For composition, compare sky blue with darker navy and a warm accent: the difference in lightness often does more work than the color names themselves.
Read the reference: CSS Color: named colors ↗
Things with sky blue tones
These illustrated references explore a color family. Objects vary; none is a claim of an exact #87CEEB match.
Light water reflections
A pale blue reflection can sit above a darker blue-green depth.
Light blue fabric
Pale fabric benefits from darker folds and a visible outline.
Blue glazed ceramics
A light glaze reference helps imagine the hue beside warm off-white materials.
Ideas for using sky blue
Interfaces
Use sky blue behind dark text or a decorative illustration. Measure small labels on it.
Games
Place it in a distant sky layer and keep the playable foreground more strongly defined.
Posters
Try a pale blue base with a small orange focal point and navy typography.
Watch out: White text on sky blue is typically too weak. A pale hue can be a good background while being a poor text color.
Tints, shades & companion hues
These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.
Hue companions
Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.
Palettes featuring sky blue
See the palette at work
Palette preview studio
Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.
Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.Try it in context
Live design & contrast preview
Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.
12.06:1 · AAA normal text
AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗
Your next good idea
Try a readable heading, a short paragraph and a clear action on this surface.
Example action →Static design sample · use the controls to change itCompare sky blue with another color →
Questions about sky blue
Does sky blue match every daytime sky?
No. This is the CSS skyblue anchor; observed skies vary with atmosphere, light and viewing conditions.
Will this look the same in print?
No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.
Can I use these codes in a website or game?
Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.
Keep exploring
A color name is a starting point
Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.
Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide