← Back to Editor

#E9D29E · #D4A764 · #DA8163 · #9AA084 · #C59648

warm

A 5-color warm 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

#E9D29E

Goose Yellow · Wheat · Lemon Cream

HEX
#E9D29E
RGB
rgb(233, 210, 158)
HSL
hsl(42, 63%, 77%)
HSB
hsb(42, 32%, 91%)
CMYK
cmyk(0%, 10%, 32%, 9%)
Oklch
oklch(87.0% 0.072 86.9)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

#D4A764

Ginger · SandyBrown · Warm Sun

HEX
#D4A764
RGB
rgb(212, 167, 100)
HSL
hsl(36, 57%, 61%)
HSB
hsb(36, 53%, 83%)
CMYK
cmyk(0%, 21%, 53%, 17%)
Oklch
oklch(75.5% 0.100 76.2)

TraditionalGinger」· PaintWarm Sun」· Creative Honey Glow

#DA8163

Apricot · DarkSalmon · Warm Sun

HEX
#DA8163
RGB
rgb(218, 129, 99)
HSL
hsl(15, 62%, 62%)
HSB
hsb(15, 55%, 85%)
CMYK
cmyk(0%, 41%, 55%, 15%)
Oklch
oklch(69.2% 0.118 39.3)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#9AA084

Grass Green · DarkSeaGreen · Olive Green

HEX
#9AA084
RGB
rgb(154, 160, 132)
HSL
hsl(73, 13%, 57%)
HSB
hsb(73, 17%, 63%)
CMYK
cmyk(4%, 0%, 17%, 37%)
Oklch
oklch(69.3% 0.040 117.3)

TraditionalGrass Green」· PaintOlive Green」· Creative Blush Sunrise

#C59648

Ginger · GoldenRod · Warm Sun

HEX
#C59648
RGB
rgb(197, 150, 72)
HSL
hsl(37, 52%, 53%)
HSB
hsb(37, 63%, 77%)
CMYK
cmyk(0%, 24%, 63%, 23%)
Oklch
oklch(70.2% 0.111 77.9)

TraditionalGinger」· PaintWarm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9D29E
9FB6E9

Analogous

E9AE9F
E9D29E
DBE99F

Triadic

E9D29E
9FE9D3
D39FE9

Split-Comp.

E9D29E
9FDBE9
AE9FE9

Tetradic

E9D29E
9FE9AE
9FB6E9
E99FDB

Contrast Matrix WCAG 2.1 Contrast

E9D29E
D4A764
DA8163
9AA084
C59648
1.5
Fail
1.9
Fail
1.8
Fail
1.8
Fail
1.5
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.9
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.8
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.8
Fail
1.2
Fail
1.1
Fail
1.0
Fail
White BG
1.5Fail
2.2Fail
2.9Fail
2.7Fail
2.7Fail
Black BG
14.2AAA
9.5AAA
7.3AAA
7.7AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFAB
C1C074
B3B36A
9D9D8B
B1B05B

Deuteranopia

E0E2AE
C3C678
B9BF6C
9C9C8C
B3B75F

Tritanopia

E8B5B7
D28184
D67071
9A9091
C36A6D

Achromatopsia

D3D3D3
ADADAD
989898
9B9B9B
9B9B9B

Shades & Tints Shades & Tints

#E9D29E

Dark
Light

#D4A764

Dark
Light

#DA8163

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9d29e;
  --color-2: #d4a764;
  --color-3: #da8163;
  --color-4: #9aa084;
  --color-5: #c59648;
}

SCSS

$color-1: #e9d29e;
$color-2: #d4a764;
$color-3: #da8163;
$color-4: #9aa084;
$color-5: #c59648;

TAILWIND

colors: {
  'brand-1': '#e9d29e',
  'brand-2': '#d4a764',
  'brand-3': '#da8163',
  'brand-4': '#9aa084',
  'brand-5': '#c59648',
}

RGB Array

[233, 210, 158], [212, 167, 100], [218, 129, 99], [154, 160, 132], [197, 150, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #E9D29E, #D4A764, #DA8163, #9AA084, #C59648 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: #e9d29e; --color-2: #d4a764; --color-3: #da8163; --color-4: #9aa084; --color-5: #c59648. 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 warm-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