Blue Color Palette
Trust · Calm · Professional
A harmonious blue palette spanning from light sky tones to deep navy. Blue is the world's most trusted colour — associated with reliability, professionalism, and calm. Dominates technology, finance, and healthcare branding.
| Swatch | Name | Hex |
|---|---|---|
| Sky 50 | #EFF6FF | |
| Sky 100 | #DBEAFE | |
| Blue 300 | #93C5FD | |
| Blue 500 | #3B82F6 | |
| Blue 700 | #1D4ED8 | |
| Navy | #1E3A8A |
Best For
Use the lightest shade for backgrounds, mid-tones for UI components, and the darkest for text or CTAs to create clear visual hierarchy.
CSS Custom Properties
:root {
--blue-100: #EFF6FF;
--blue-200: #DBEAFE;
--blue-300: #93C5FD;
--blue-400: #3B82F6;
--blue-500: #1D4ED8;
--blue-600: #1E3A8A;
}Tailwind CSS Config
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
"blue": {
"100": "#EFF6FF",
"200": "#DBEAFE",
"300": "#93C5FD",
"400": "#3B82F6",
"500": "#1D4ED8",
"600": "#1E3A8A",
},
},
},
},
}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 Blue Color Palette?
The Blue Color Palette includes: Sky 50 (#EFF6FF), Sky 100 (#DBEAFE), Blue 300 (#93C5FD), Blue 500 (#3B82F6), Blue 700 (#1D4ED8), Navy (#1E3A8A).
What is the mood of the Blue Color Palette?
Blue Color Palette evokes: Trust · Calm · Professional. A harmonious blue palette spanning from light sky tones to deep navy. Blue is the world's most trusted colour — associated with reliability, professionalism, and calm. Dominates technology, finance, and healthcare branding.
What industries use the Blue Color Palette?
The Blue Color Palette is popular in: Technology, Finance, Healthcare, Corporate. Use the lightest shade for backgrounds, mid-tones for UI components, and the darkest for text or CTAs to create clear visual hierarchy.
What colours pair well with this palette?
This palette pairs well with: white, gray, gold. Use the lightest shade for backgrounds, mid-tones for UI components, and the darkest for text or CTAs to create clear visual hierarchy.