Use sky color palettes with blue, cloud, and horizon tones for SaaS products, education, travel, and interfaces that need a sense of openness.
Sky palettes are mostly pale blues and cyans, with the occasional sunlight yellow or dusk lavender. They produce airy backgrounds easily; the work is finding or adding a blue dark enough for text and actions.
Sky palettes are the lightest blue collection on the site: average lightness across the 62 palettes is about 70%, and roughly 65% of swatches are blue or cyan. Pale sunlight yellows such as #FFF6BF and #FEF5AC show up as companions. A smaller set covers dusk instead, with lavender and rose like #937DC2, #C689C6, #E8A0BF, #FCC5C0.
Because so much of the collection is pale, the deciding question for any sky palette is whether it contains a dark enough blue for text and links. Many do not.
This is one of the few sky palettes that covers the whole value range, so it maps onto UI roles without any additions.
:root {
--sky-50: #dff6ff;
--sky-400: #47b5ff; /* decorative only */
--sky-600: #1363df; /* links, buttons */
--sky-950: #06283d; /* text */
}Mid sky blues look strong enough for a button and are not. Azure #0AA1DD with a white label is 2.94:1. Moving one swatch deeper in the same palette, to #2155CD, gives 6.47:1. Pale cyan #79DAE8 is 1.61:1 against white, which rules it out for text and also for input borders, since a border that identifies a field needs 3:1.
Combine a pale sky tint for surfaces with a deep navy for text and one saturated blue for links and buttons. A pale yellow such as #FFF6BF works as a callout or highlight background without breaking the light feel.
Most sky blues are too light for white text, so give links and buttons a deeper blue: #2155CD on the pale #E8F9FD is 5.98:1. Underline links or add an icon so they are not distinguished by color alone.
Updated