Sky & Cloud color palette
A clear spring afternoon, from cloud white #E3F2FD to a crisp daytime blue, #2196F3. All five are light to medium and cheerful, with no gray or navy in the mix. That makes the set friendly and open, though it needs a dark navy or charcoal for text. Weather apps and airline booking pages are natural homes for it.
Sky & Cloud palette in use
Use #E3F2FD as the background and #BBDEFB for cards. #2196F3 is the button color with white labels, and body text should go in a dark navy, since none of these blues is deep enough.
This pair measures 18.38:1, so it works for body text too. The button uses #2196F3 with black text.
ButtonGood for
- Weather app
- Airline booking page
- Kids' education platform
- Cleaning service website
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Sky & Cloud palette as code
CSS variables
:root {
--sky-and-cloud-1: #E3F2FD;
--sky-and-cloud-2: #BBDEFB;
--sky-and-cloud-3: #90CAF9;
--sky-and-cloud-4: #64B5F6;
--sky-and-cloud-5: #2196F3;
}Tailwind v4
@theme {
--color-sky-and-cloud-1: #E3F2FD;
--color-sky-and-cloud-2: #BBDEFB;
--color-sky-and-cloud-3: #90CAF9;
--color-sky-and-cloud-4: #64B5F6;
--color-sky-and-cloud-5: #2196F3;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'sky-and-cloud': {
100: '#E3F2FD',
200: '#BBDEFB',
300: '#90CAF9',
400: '#64B5F6',
500: '#2196F3',
},SCSS
$sky-and-cloud-1: #E3F2FD;
$sky-and-cloud-2: #BBDEFB;
$sky-and-cloud-3: #90CAF9;
$sky-and-cloud-4: #64B5F6;
$sky-and-cloud-5: #2196F3;JSON
["#E3F2FD","#BBDEFB","#90CAF9","#64B5F6","#2196F3"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.