Kelly Green & Honey Story is a vivid analogous color palette tagged happy, vibrant, warm. Analogous neighbors on the wheel (Kelly Green, Brass, Honey) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Kelly Green | #72A900 | rgb(114, 169, 0) | hsl(80, 100%, 33%) | oklch(67.1% 0.178 129) | |
| Brass | #AC9900 | rgb(172, 153, 0) | hsl(53, 100%, 34%) | oklch(67.9% 0.141 100) | |
| Honey | #E29300 | rgb(226, 147, 0) | hsl(39, 100%, 44%) | oklch(72.6% 0.156 71) | |
| Peach Puff | #FFD5C5 | rgb(255, 213, 197) | hsl(17, 100%, 89%) | oklch(90.5% 0.052 42) |
Why it works and how to use it
The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (89% down to 33% lightness). A natural fit for websites, presentations and branding.
- Background: Peach Puff (#FFD5C5) is the lightest color, so it belongs on large surfaces.
- Text: Brass (#AC9900) on #FFD5C5 gives 2.13:1, so pair it with a darker neutral for body copy.
- Primary: Kelly Green (#72A900) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Honey (#E29300) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
Design faster with Kelly Green & Honey Story
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryColor blindness simulation
Color-blind check: under protanopia and deuteranopia, Kelly Green and Brass, Kelly Green and Honey, Brass and Honey become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#AC9900 on #FFD5C5 | Aa | 2.13:1 | Fail |
#72A900 on #FFD5C5 | Aa | 2.11:1 | Fail |
#E29300 on #FFD5C5 | Aa | 1.85:1 | Fail |
#AC9900 on #E29300 | Aa | 1.15:1 | Fail |
#72A900 on #E29300 | Aa | 1.14:1 | Fail |
#72A900 on #AC9900 | Aa | 1.01:1 | Fail |