CSS Color: SkyBlue
Named CSS color SkyBlue — #87CEEB in HEX, rgb(135, 206, 235) in RGB, hsl(197, 71%, 73%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | SkyBlue | color: SkyBlue; |
| HEX | #87CEEB | color: #87CEEB; |
| RGB | rgb(135, 206, 235) | color: rgb(135, 206, 235); |
| HSL | hsl(197, 71%, 73%) | color: hsl(197, 71%, 73%); |
About SkyBlue
SkyBlue is a light, cheerful blue that evokes clear daytime skies. At hex `#87CEEB`, it sits at 197 degrees with 71% saturation and 73% lightness. Its high lightness gives it a soft, approachable character.
In web design, SkyBlue works beautifully for soft backgrounds, card surfaces, and section dividers. It adds color without overwhelming content and creates a friendly, welcoming atmosphere. It is popular in weather apps, children's websites, travel platforms, and light-themed designs.
Accessibility: SkyBlue against white achieves only about 1.8:1 contrast, making it unsuitable for text on light backgrounds. Use it as a background color with dark text, or as an accent on dark surfaces. Against dark backgrounds, it reads clearly and feels fresh.
SkyBlue is lighter than SteelBlue and DodgerBlue, and less saturated than Cyan. It pairs well with navy, white, warm coral, and soft gray. In Tailwind CSS, `sky-300` is a close match for this universally appealing blue.
FAQ
What is the hex code for SkyBlue?
The CSS named color SkyBlue has the hex code #87CEEB. You can use it in CSS as color: #87CEEB; or simply color: SkyBlue;.
What is SkyBlue in RGB?
In RGB notation, SkyBlue is rgb(135, 206, 235). Use it in CSS as color: rgb(135, 206, 235);.
What is SkyBlue in HSL?
In HSL notation, SkyBlue is hsl(197, 71%, 73%). Use it in CSS as color: hsl(197, 71%, 73%);.
What color category is SkyBlue?
SkyBlue belongs to the Blue color family in the CSS named colors specification.
Can I use the name "SkyBlue" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: SkyBlue; or background-color: SkyBlue; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert SkyBlue to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →