uiwheel
Open Wheel
Base Hex: #D97706

Vintage Color Wheel & UI Harmonies

#DB7706Hue 32°split-complementary

Drag the handle around the wheel or use sliders below

RGB(219, 119, 6)
Hue Angle32°
Saturation95%
Lightness44%

Generated Harmonies (3 Colors)

Primary Base

#DB7706

oklch(0.669 0.159 57.7)

Split Accent 1

#06D4DB

oklch(0.790 0.134 199.1)

Split Accent 2

#0D06DB

oklch(0.408 0.276 265.3)

Design System Validation

Live UI Component Preview

UI

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 (#0D06DB)
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 RoleHexOn Pure White (#FFF)On Dark Obsidian (#0B0F19)Recommended Usage
Primary Base
#DB7706
3.16:1(AA (large text))
6.07:1(AA)
Best on Dark UI / Buttons
Split Accent 1
#06D4DB
1.83:1(Fail)
10.44:1(AAA)
Best on Dark UI / Buttons
Split Accent 2
#0D06DB
10.16: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: '#FAF8F4',
          100: '#F4EEE6',
          200: '#FDD9AF',
          300: '#FCC17E',
          400: '#FAA442',
          500: '#DB7706',
          600: '#D17205',
          700: '#A95C04',
          800: '#7C4403',
          900: '#572E00',
          950: '#331B00',
        },
        secondary: '#06D4DB',
        accent: '#0D06DB',
      }
    }
  }
};
Color Architecture & Design Systems

How to Use Vintage in Digital Product Design

A vintage color wheel revives the warm, sun-faded analog aesthetics of the 1970s and 80s. Popularized across modern retro web designs, vintage poster typography, and aesthetic packaging, vintage palettes unite rich mustard ochre, burnt terracotta, avocado green, and sepia cream into a comforting, nostalgic visual language.

✓Recommended UI Applications

Beloved by craft breweries, boutique coffee roasters, vintage apparel brands, and retro portfolio sites. It replaces sterile digital tech aesthetics with tactile warmth and printed-matter charm.

⚠Accessibility & Contrast Guidelines

Mustard ochre (#D97706) requires dark espresso text (#291807) to achieve 8.2:1 AAA compliance. Sepia cream card surfaces (#FEF3C7) paired with burnt orange text provide 7.4:1 contrast.

Curated UI Pairings for Vintage

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

Avocado Green

#65A30D

70s retro botanical green for balanced split-complementary harmony.

Sepia Cream Canvas

#FEF3C7

Warm analog paper surface replacing modern stark white.

Dark Espresso Bronze

#291807

Deep roasted text anchor delivering AAA readability across cards.

Vintage Design System Token Specifications

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

HEX CODE

#D97706

RGB VALUE

rgb(217, 119, 6)

HSL VALUE

hsl(32°, 95%, 44%)

OKLCH VALUE

oklch(0.666 0.157 58.3)

Target Industries:Retro E-commerceCraft Beverages & FoodVintage ApparelCreative Agencies

Frequently Asked Questions About Vintage

What primary role should Vintage take in a digital interface?

A vintage color wheel revives the warm, sun-faded analog aesthetics of the 1970s and 80s. Popularized across modern retro web designs, vintage poster typography, and aesthetic packaging, vintage palettes unite rich mustard ochre, burnt terracotta, avocado green, and sepia cream into a comforting, nostalgic visual language. 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 Vintage?

Mustard ochre (#D97706) requires dark espresso text (#291807) to achieve 8.2:1 AAA compliance. Sepia cream card surfaces (#FEF3C7) paired with burnt orange text provide 7.4:1 contrast. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Vintage 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.