Bourbon & Rye Color Palette
#8E5C2E · #C8904A · #E8D0A0 · #2A1606
Use #8E5C2E as the background. Use #C8904A as the primary accent. Use #E8D0A0 as secondary. Use #2A1606 as body text/supporting color. Palette mood: Bourbon & Rye — warm, classic, robust.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Bourbon & Rye color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 13.6% | 142, 92, 46 | 0%, 35%, 68%, 44% | 29°, 51%, 37% | ||
| Primary Accent Luminance: 32.7% | 200, 144, 74 | 0%, 28%, 63%, 22% | 33°, 53%, 54% | ||
| Secondary Luminance: 64.8% | 232, 208, 160 | 0%, 10%, 31%, 9% | 40°, 61%, 77% | ||
| Body Text Luminance: 1.1% | 42, 22, 6 | 0%, 48%, 86%, 84% | 27°, 75%, 9% |
Bourbon & Rye Tints & Shades
Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Bourbon & Rye palette — click any swatch to copy its hex.
Bourbon & Rye Palette Contrast Matrix (WCAG 2.1)
Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.
| Text on Background | Preview | Ratio | Grade | Safe For |
|---|---|---|---|---|
| #2A1606 on #E8D0A0 |
Aa Sample Text
| 11.48:1 | AAA | Body text, headings, UI |
| #E8D0A0 on #2A1606 |
Aa Sample Text
| 11.48:1 | AAA | Body text, headings, UI |
| #2A1606 on #C8904A |
Aa Sample Text
| 6.20:1 | AA | Body text, UI |
| #C8904A on #2A1606 |
Aa Sample Text
| 6.20:1 | AA | Body text, UI |
| #E8D0A0 on #8E5C2E |
Aa Sample Text
| 3.75:1 | Fail | Large headings, UI components |
| #8E5C2E on #E8D0A0 |
Aa Sample Text
| 3.75:1 | Fail | Large headings, UI components |
| #2A1606 on #8E5C2E |
Aa Sample Text
| 3.06:1 | Fail | Large headings, UI components |
| #8E5C2E on #2A1606 |
Aa Sample Text
| 3.06:1 | Fail | Large headings, UI components |
| #C8904A on #8E5C2E |
Aa Sample Text
| 2.03:1 | Fail | Decorative use only |
| #8E5C2E on #C8904A |
Aa Sample Text
| 2.03:1 | Fail | Decorative use only |
| #E8D0A0 on #C8904A |
Aa Sample Text
| 1.85:1 | Fail | Decorative use only |
| #C8904A on #E8D0A0 |
Aa Sample Text
| 1.85:1 | Fail | Decorative use only |
Color Harmony: Analogous Scheme
The Bourbon & Rye palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Best Design Use Cases
Industries This Palette Suits
Colors That Pair Well With Bourbon & Rye
Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.
directly opposite #C8904A on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
30° beside #C8904A — a calm secondary that extends the palette without adding tension
a paper-white carrying the palette's own hue — perfect for surfaces and dividers
Using Bourbon & Rye Without Breaking Accessibility
- Avoid #C8904A for small UI elements on #8E5C2E — at 2.0:1 it misses the 3:1 WCAG threshold; darken it with a shade from the ramp below.
- Don't set body copy in #2A1606 on #8E5C2E — 3.1:1 fails WCAG AA; keep it for large decorative headings only.
- Don't use #E8D0A0 behind body text — this light tone works better for surfaces, badges and dividers than for reading areas.
How to Implement the Bourbon & Rye Color Scheme
To use this Bourbon & Rye color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'} Web Design Tip
Use #8E5C2E for the main background and #C8904A for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #2A1606 and #8E5C2E is 3.06:1 (Fail). Ensure your body text remains legible.
Bourbon & Rye Palette — Frequently Asked Questions
What are the hex codes in the Bourbon & Rye color palette?
The Bourbon & Rye palette contains #8E5C2E, #C8904A, #E8D0A0, #2A1606. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.
Is the Bourbon & Rye color palette accessible (WCAG)?
Yes for its strongest pairings: #2A1606 on #E8D0A0 reaches 11.5:1 (AAA). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.
What colors go well with the Bourbon & Rye palette?
Beyond its own four colors, #4C83C8, #B7BC57, #EFEDEB extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.
What mood does the Bourbon & Rye palette create?
Bourbon & Rye reads as warm, classic, robust. Gently saturated orange drives the personality, grounded by gently saturated orange — a combination that works best when the mid-tone base gets most of the canvas.
Can I use the Bourbon & Rye color palette commercially?
Yes. Individual color values can't be copyrighted, so the Bourbon & Rye palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.
How do I add the Bourbon & Rye palette to Tailwind or CSS?
Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Bourbon & Rye's exact values, including the tint and shade ramps shown above.