uiwheel
Open Wheel
Base Hex: #F59E0B

Amber Gold Color Wheel & UI Harmonies

#F59F0AHue 38°split-complementary

Drag the handle around the wheel or use sliders below

RGB(245, 159, 10)
Hue Angle38°
Saturation92%
Lightness50%

Generated Harmonies (3 Colors)

Primary Base

#F59F0A

oklch(0.770 0.165 70.7)

Split Accent 1

#0AD6F5

oklch(0.805 0.140 213.1)

Split Accent 2

#290AF5

oklch(0.452 0.295 269.0)

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 (#290AF5)
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
#F59F0A
2.13:1(Fail)
8.98:1(AAA)
Best on Dark UI / Buttons
Split Accent 1
#0AD6F5
1.76:1(Fail)
10.90:1(AAA)
Best on Dark UI / Buttons
Split Accent 2
#290AF5
8.55:1(AAA)
2.24: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: '#FAF8F5',
          100: '#F4EFE7',
          200: '#FCE0B1',
          300: '#FACD80',
          400: '#F7B645',
          500: '#F59F0A',
          600: '#CE8509',
          700: '#A66C07',
          800: '#7A4F05',
          900: '#573700',
          950: '#332000',
        },
        secondary: '#0AD6F5',
        accent: '#290AF5',
      }
    }
  }
};
Color Architecture & Design Systems

How to Use Amber Gold in Digital Product Design

Amber Gold (38° hue) bridges the enthusiasm of bright yellow with the stability of orange. It radiates optimism, luxury memberships (Gold/Pro tier), and vital system notifications without the alarming panic triggered by stop-sign red.

✓Recommended UI Applications

Pro plan upgrade banners, star rating systems, pending transactions, warning notifications, and warm focal badges. Looks astonishingly premium against deep obsidian or rich navy blue.

⚠Accessibility & Contrast Guidelines

Amber on white has insufficient contrast (2.1:1). Pair Amber with dark charcoal text (#1E293B) for a 9.0:1 AAA contrast ratio when styling warning pills or VIP badges.

Curated UI Pairings for Amber Gold

Expertly tested color coordinates that harmonize with Amber Gold without visual clashes.

Royal Indigo

#4338CA

Split-complementary deep royal backdrop highlighting gold accents.

Honey Glow Tint

#FFFBEB

Soft golden surface wash for warning notifications and VIP cards.

Dark Bronze Text

#78350F

Rich, legible text pairing perfectly on amber yellow surfaces.

Amber Gold Design System Token Specifications

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

HEX CODE

#F59E0B

RGB VALUE

rgb(245, 158, 11)

HSL VALUE

hsl(38°, 92%, 50%)

OKLCH VALUE

oklch(0.769 0.165 70.1)

Target Industries:SaaS Pricing TiersFintech & RewardsEdTech CertificationsFood Delivery

Frequently Asked Questions About Amber Gold

What primary role should Amber Gold take in a digital interface?

Amber Gold (38° hue) bridges the enthusiasm of bright yellow with the stability of orange. It radiates optimism, luxury memberships (Gold/Pro tier), and vital system notifications without the alarming panic triggered by stop-sign red. 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 Amber Gold?

Amber on white has insufficient contrast (2.1:1). Pair Amber with dark charcoal text (#1E293B) for a 9.0:1 AAA contrast ratio when styling warning pills or VIP badges. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

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