Honey Bee color palette
A honeycomb in five colors: pale cornsilk #FFF8DC, lemon yellow, honey gold #FFC200, a dark orange and a deep brown, #3B1F0A, that stands in for the bee's stripes. The yellows are bright, but the cream and brown keep it usable for text and backgrounds. Apiaries and breakfast cafes are the obvious users.
Honey Bee palette in use
Dark brown #3B1F0A text on a #FFF8DC background covers most of the page. #FFC200 suits buttons with brown labels, #FF8C00 hover states, and #FFE135 highlight banners.
This pair measures 14.21:1, so it works for body text too. The button uses #FF8C00 with black text.
ButtonGood for
- Honey jar label
- Breakfast cafe menu
- Farm store website
- Kids' nature program
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 |
|---|---|---|---|
#3B1F0A | #FFF8DC | 14.21:1 | AAA |
#3B1F0A | #FFE135 | 11.59:1 | AAA |
#3B1F0A | #FFC200 | 9.35:1 | AAA |
#3B1F0A | #FF8C00 | 6.49:1 | AA |
Honey Bee palette as code
CSS variables
:root {
--honey-bee-1: #FFF8DC;
--honey-bee-2: #FFE135;
--honey-bee-3: #FFC200;
--honey-bee-4: #FF8C00;
--honey-bee-5: #3B1F0A;
}Tailwind v4
@theme {
--color-honey-bee-1: #FFF8DC;
--color-honey-bee-2: #FFE135;
--color-honey-bee-3: #FFC200;
--color-honey-bee-4: #FF8C00;
--color-honey-bee-5: #3B1F0A;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'honey-bee': {
100: '#FFF8DC',
200: '#FFE135',
300: '#FFC200',
400: '#FF8C00',
500: '#3B1F0A',
},SCSS
$honey-bee-1: #FFF8DC;
$honey-bee-2: #FFE135;
$honey-bee-3: #FFC200;
$honey-bee-4: #FF8C00;
$honey-bee-5: #3B1F0A;JSON
["#FFF8DC","#FFE135","#FFC200","#FF8C00","#3B1F0A"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.