Cool Color Palette
Calm · Clean · Trustworthy
A cohesive cool palette spanning blues, greens, and purples. Cool colours recede visually, creating space and calm. They feel clean, professional, and trustworthy — the dominant choice for technology, healthcare, and financial products.
| Swatch | Name | Hex |
|---|---|---|
| Sky | #E0F2FE | |
| Blue | #0EA5E9 | |
| Teal | #0D9488 | |
| Emerald | #10B981 | |
| Indigo | #6366F1 | |
| Violet | #8B5CF6 |
Best For
Use the deepest tones for navigation and primary actions, mid-tones for interactive states and borders, lightest tones for card and section backgrounds.
CSS Custom Properties
:root {
--cool-100: #E0F2FE;
--cool-200: #0EA5E9;
--cool-300: #0D9488;
--cool-400: #10B981;
--cool-500: #6366F1;
--cool-600: #8B5CF6;
}Tailwind CSS Config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
"cool": {
"100": "#E0F2FE",
"200": "#0EA5E9",
"300": "#0D9488",
"400": "#10B981",
"500": "#6366F1",
"600": "#8B5CF6",
},
},
},
},
}Generate a custom palette
Enter any seed colour and generate complementary, analogous, triadic, and monochromatic palettes. Export as CSS variables, Tailwind config, or JSON.
Open Color Palette GeneratorFrequently Asked Questions
What hex codes are in the Cool Color Palette?
The Cool Color Palette includes: Sky (#E0F2FE), Blue (#0EA5E9), Teal (#0D9488), Emerald (#10B981), Indigo (#6366F1), Violet (#8B5CF6).
What is the mood of the Cool Color Palette?
Cool Color Palette evokes: Calm · Clean · Trustworthy. A cohesive cool palette spanning blues, greens, and purples. Cool colours recede visually, creating space and calm. They feel clean, professional, and trustworthy — the dominant choice for technology, healthcare, and financial products.
What industries use the Cool Color Palette?
The Cool Color Palette is popular in: Technology, Healthcare, Finance, Education. Use the deepest tones for navigation and primary actions, mid-tones for interactive states and borders, lightest tones for card and section backgrounds.
What colours pair well with this palette?
This palette pairs well with: white, light-gray. Use the deepest tones for navigation and primary actions, mid-tones for interactive states and borders, lightest tones for card and section backgrounds.