COLOR FIELD NOTES

A closer look at
#d8b14d

Selected color · sRGB#d8b14d

The numbers behind the color · RGB / HSL / OKLCH

HEX: #d8b14d
RGB: rgb(216, 177, 77)
HSL: hsl(43.17, 64.06%, 57.45%)
OKLCH: oklch(0.77642304 0.12567114 87.691283)

Explore this color in the studio

02 / COLOR COMPANIONS

Better together.

Find a different perspective on your color with a little color theory.

Neighbors at −30°, 0° and +30°. A close-knit family of hues.

01COMPANION

#d86b4drgb(216, 107, 77)oklch(0.65065789 0.14420776 36.33236)

Contrast ratio: 6.13:1

02BASE

#d8b14drgb(216, 177, 77)oklch(0.77642304 0.12567114 87.691283)

Contrast ratio: 10.32:1

03COMPANION

#bad84drgb(186, 216, 77)oklch(0.83391025 0.16586845 120.551268)

Contrast ratio: 13.02:1

HSL / Analogous

Color values & advanced tools

Selected color / #D8B14D

The numbers behind the color

One color, four ways to describe it.

HEX

#d8b14d

RGB

rgb(216, 177, 77)

HSL

hsl(43.17, 64.06%, 57.45%)

OKLCH

oklch(0.77642304 0.12567114 87.691283)

Hue: 43.17°
Saturation: 64.06%
Lightness: 57.45%

Where this harmony might work

Design suggestions below are subjective. Hue angles and contrast ratios are calculated facts.

Suggested use: Editorial pages, lifestyle brands and calm interfaces.
Strength: Neighboring hues create a related visual rhythm.
Considerations: Similar hues can blur boundaries; add labels and neutral spacing.
Design example: Use the middle hue for a hero panel and its neighbors for decorative cards.

OKLCH · Perceptual adjustments

Adjust lightness and chroma of unlocked companions in OKLCH. HSL hue spacing can change. Preview the result before applying.

OKLCH lightness offset 0%OKLCH chroma scale 100%

Current palette

Adjusted preview

Colors needing sRGB chroma reduction: 0

The base color is the anchor. Locks and the base color stay unchanged.

Compare with the original HSL harmony

These are the unedited theory colors. Compare their HEX and OKLCH values with the edited palette above.

#d86b4doklch(0.65065789 0.14420776 36.33236)#d8b14doklch(0.77642304 0.12567114 87.691283)#bad84doklch(0.83391025 0.16586845 120.551268)

Palette CSS

:root {
  --palette-1: #d86b4d;
  --palette-2: #d8b14d;
  --palette-3: #bad84d;
}

Live design preview

03 / IN CONTEXT

Put it into perspective.

Real CSS. Your colors. A small glimpse of what comes next.

Palette role mappingPrimary / backgroundPalette text / accent

Rendered text pair #000000 / #d8b14d · 10.32:1

your-next-idea.design

FORM & FIELDIndependent ideas. Considered colors.

STUDIO FOR EVERYDAY IDEAS

Room for a fresh perspective.

Thoughtfully made things start with a little curiosity.

Discover the collection

The palette text/background pair is below normal-text AA.

#bad84d / #d8b14d · 1.26:1 · Normal text · AA

Suggested text color: #000000 (10.32:1).

Displayed text contrast: 10.32:1 · Accessible text alternatives affect only the preview. Your palette stays unchanged.

The tested pair is used on colored buttons, cards, KPIs and slide bands. Other template text uses #262a23 (13.18:1) or #55594f (6.47:1) on #f6f3ec. Charts have numbered labels. This is not a complete accessibility audit.

Text contrast checker

Accessibility / WCAG AA

Make it readable.

Check the selected color against your text or background color.

Suggested text color: #000000 · 21.00:1

AA requires 4.5:1 for normal text and 3:1 for large text. This checks color contrast, not full WCAG compliance.

Color should be seen. Words should be read.

#d8b14d / #ffffff

Contrast ratio2.04:1

Normal text · AABelow target
Large text · AABelow target
Normal text · AAABelow target
Large text · AAABelow target

A little theory. A lot to explore.

PALUNEXA rotates hues on the HSL color wheel and keeps saturation and lightness unchanged. Monochromatic palettes vary lightness instead. Harmony is a starting point for design, not a guarantee of aesthetic fit.

Back to the atlas

A closer look at#d8b14d