← Back to Editor

#EDD691 · #D3B476 · #B1A973 · #9D916C · #F3B65A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#EDD691

Goose Yellow · Khaki · Sunflower

HEX
#EDD691
RGB
rgb(237, 214, 145)
HSL
hsl(45, 72%, 75%)
HSB
hsb(45, 39%, 93%)
CMYK
cmyk(0%, 10%, 39%, 7%)
Oklch
oklch(88.0% 0.091 91.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#D3B476

Ginger · BurlyWood · Sunflower

HEX
#D3B476
RGB
rgb(211, 180, 118)
HSL
hsl(40, 51%, 65%)
HSB
hsb(40, 44%, 83%)
CMYK
cmyk(0%, 15%, 44%, 17%)
Oklch
oklch(78.3% 0.088 84.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B1A973

Autumn Sage · Tan · Sunflower

HEX
#B1A973
RGB
rgb(177, 169, 115)
HSL
hsl(52, 28%, 57%)
HSB
hsb(52, 35%, 69%)
CMYK
cmyk(0%, 5%, 35%, 31%)
Oklch
oklch(72.8% 0.073 100.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#9D916C

Ginger · Gray · Sunflower

HEX
#9D916C
RGB
rgb(157, 145, 108)
HSL
hsl(45, 20%, 52%)
HSB
hsb(45, 31%, 62%)
CMYK
cmyk(0%, 8%, 31%, 38%)
Oklch
oklch(65.8% 0.054 92.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F3B65A

Ginger · SandyBrown · Warm Sun

HEX
#F3B65A
RGB
rgb(243, 182, 90)
HSL
hsl(36, 86%, 65%)
HSB
hsb(36, 63%, 95%)
CMYK
cmyk(0%, 25%, 63%, 5%)
Oklch
oklch(81.5% 0.129 75.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EDD691
91A8ED

Analogous

EDA891
EDD691
D6ED91

Triadic

EDD691
91EDD6
D691ED

Split-Comp.

EDD691
91D6ED
A891ED

Tetradic

EDD691
91EDA8
91A8ED
ED91D6

Contrast Matrix WCAG 2.1 Contrast

EDD691
D3B476
B1A973
9D916C
F3B65A
—
1.4
Fail
1.7
Fail
2.2
Fail
1.3
Fail
1.4
Fail
—
1.2
Fail
1.6
Fail
1.1
Fail
1.7
Fail
1.2
Fail
—
1.3
Fail
1.3
Fail
2.2
Fail
1.6
Fail
1.3
Fail
—
1.7
Fail
1.3
Fail
1.1
Fail
1.3
Fail
1.7
Fail
—
White BG
1.4Fail
2.0Fail
2.4Fail
3.1AA Large
1.8Fail
Black BG
14.6AAA
10.6AAA
8.8AAA
6.7AA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3A2
C6C585
AEAD80
989875
D9D870

Deuteranopia

E4E6A6
C7CA89
AEAF83
999977
DCE176

Tritanopia

ECAFB2
D19193
B18A8D
9C7C7E
F08286

Achromatopsia

D5D5D5
B6B6B6
A5A5A5
909090
BEBEBE

Shades & Tints Shades & Tints

#EDD691

Dark
Light

#D3B476

Dark
Light

#B1A973

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #edd691;
  --color-2: #d3b476;
  --color-3: #b1a973;
  --color-4: #9d916c;
  --color-5: #f3b65a;
}

SCSS

$color-1: #edd691;
$color-2: #d3b476;
$color-3: #b1a973;
$color-4: #9d916c;
$color-5: #f3b65a;

TAILWIND

colors: {
  'brand-1': '#edd691',
  'brand-2': '#d3b476',
  'brand-3': '#b1a973',
  'brand-4': '#9d916c',
  'brand-5': '#f3b65a',
}

RGB Array

[237, 214, 145], [211, 180, 118], [177, 169, 115], [157, 145, 108], [243, 182, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EDD691, #D3B476, #B1A973, #9D916C, #F3B65A is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #edd691; --color-2: #d3b476; --color-3: #b1a973; --color-4: #9d916c; --color-5: #f3b65a. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color