Base Hex: #B45309

Boho Color Wheel & UI Harmonies

Drag the handle around the wheel or use sliders below

Harmony Formula

RGB(179, 83, 9)

Hue Angle26°

Saturation90%

Lightness37%

Generated Harmonies (3 Colors)

Primary Base

#B35309

oklch(0.554 0.145 49.3)

Secondary

#09B353

oklch(0.671 0.183 149.9)

Accent

#5309B3

oklch(0.405 0.221 291.4)

Design System Validation

Live UI Component Preview

Apex Analytics

Team Dashboard

Harmonized Active

Total Conversion+18.4%

$84,290

Active Users+34.2%

14,820

Harmonic Health99.8%

Optimal

Interactive Button & State Styles

Verify clickability, state contrasts, and visual weight across primary and secondary controls.

Badge Tag (#5309B3)

Accessibility Audit

WCAG 2.1 Contrast Matrix

Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).

Color Role	Hex	On Pure White (#FFF)	On Dark Obsidian (#0B0F19)	Recommended Usage
Primary Base	#B35309	5.05:1(AA)	3.79:1(AA (large text))	Best on Light UI / Backgrounds
Secondary	#09B353	2.77:1(Fail)	6.92:1(AA)	Best on Dark UI / Buttons
Accent	#5309B3	10.21:1(AAA)	1.88:1(Fail)	Best on Light UI / Backgrounds

Design Token Generator

50–950 Tailwind Shade Ramp

Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.

Developer Export Center

Ready-to-Use Code Snippets

// tailwind.config.js / CSS @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#FAF7F5',
          100: '#F4ECE7',
          200: '#FBD1B1',
          300: '#F8B581',
          400: '#F59247',
          500: '#B35309',
          600: '#CB5E0B',
          700: '#A54C09',
          800: '#793806',
          900: '#572600',
          950: '#331600',
        },
        secondary: '#09B353',
        accent: '#5309B3',
      }
    }
  }
};

Color Architecture & Design Systems

How to Use Boho in Digital Product Design

✓Recommended UI Applications

Extensively searched for wedding branding, bespoke stationery, handmade ceramics, and boutique salon apps. It creates an intimate, handcrafted, and welcoming aesthetic.

⚠Accessibility & Contrast Guidelines

Boho terracotta (#B45309) delivers 6.2:1 AA contrast against pure white text. Against pampas cream (#FDFBF7), it provides 7.8:1 AAA readability for headers and action buttons.

Curated UI Pairings for Boho

Expertly tested color coordinates that harmonize with Boho without visual clashes.

Desert Sage Olive

#8F9E8B

Muted botanical green bringing soothing equilibrium to warm terracotta.

Pampas Grass Cream

#FDFBF7

Warm unbleached bridal surface replacing cold sterile white.

Deep Cinnamon Umber

#3A2114

Dark organic bronze text anchor delivering 11:1 AAA contrast.

Boho Design System Token Specifications

Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.

HEX CODE

#B45309

RGB VALUE

rgb(180, 83, 9)

HSL VALUE

hsl(26°, 90%, 37%)

OKLCH VALUE

oklch(0.555 0.146 49.0)

Target Industries:Weddings & EventsCeramics & Handcrafted GoodsBoutique Salons & SpasBoho Interior Decor

Frequently Asked Questions About Boho

What primary role should Boho take in a digital interface?

A boho (bohemian) color wheel celebrates free-spirited, rustic warmth, blending Southwestern desert landscapes with artisanal textiles. Popularized in wedding moodboards, interior styling, and boutique lifestyle branding, boho palettes layer warm terracotta, dried floral neutrals, muted desert sage, and rich amber ochre. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.

How do I maintain WCAG AA accessibility when using Boho?

Boho terracotta (#B45309) delivers 6.2:1 AA contrast against pure white text. Against pampas cream (#FDFBF7), it provides 7.8:1 AAA readability for headers and action buttons. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Boho into Tailwind CSS?

Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.

Explore More

Related Design Color Wheels

View all wheels →

Aesthetic

#9D8DF1

Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.

Soft Autumn

#B86B53

Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.

Deep Winter

#1E3A8A

High-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.

Soft Summer

#9B8EB9

Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.