Bluebell color palette
A carpet of bluebells in an English wood. #BDD7EE is the pale mist over them, #9CC3E5 and #6DA8D9 are the open flowers, and #3D8AC8 and #1A6DB2 are the deeper, shaded petals. The blues are gentle and slightly gray, friendlier than a corporate blue. Spring weddings and family clinics both suit its gentle tone.
Bluebell palette in use
On white, use #1A6DB2 for headings and text and #3D8AC8 for buttons. #BDD7EE suits cards and banners, and #9CC3E5 and #6DA8D9 work for icons and illustrations.
This pair measures 14.11:1, so it works for body text too. The button uses #1A6DB2 with white text.
ButtonGood for
- Spring wedding invite
- Family clinic website
- Children's charity appeal
- Garden tour brochure
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#1A6DB2 | #BDD7EE | 3.64:1 | AA large |
Bluebell palette as code
CSS variables
:root {
--bluebell-1: #BDD7EE;
--bluebell-2: #9CC3E5;
--bluebell-3: #6DA8D9;
--bluebell-4: #3D8AC8;
--bluebell-5: #1A6DB2;
}Tailwind v4
@theme {
--color-bluebell-1: #BDD7EE;
--color-bluebell-2: #9CC3E5;
--color-bluebell-3: #6DA8D9;
--color-bluebell-4: #3D8AC8;
--color-bluebell-5: #1A6DB2;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'bluebell': {
100: '#BDD7EE',
200: '#9CC3E5',
300: '#6DA8D9',
400: '#3D8AC8',
500: '#1A6DB2',
},SCSS
$bluebell-1: #BDD7EE;
$bluebell-2: #9CC3E5;
$bluebell-3: #6DA8D9;
$bluebell-4: #3D8AC8;
$bluebell-5: #1A6DB2;JSON
["#BDD7EE","#9CC3E5","#6DA8D9","#3D8AC8","#1A6DB2"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.