← Back to Editor

#E3D29E · #AFC9A2 · #A5BD8B · #D97947 · #D95550

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

#E3D29E

Goose Yellow · Khaki · Sunflower

HEX
#E3D29E
RGB
rgb(227, 210, 158)
HSL
hsl(45, 55%, 75%)
HSB
hsb(45, 30%, 89%)
CMYK
cmyk(0%, 7%, 30%, 11%)
Oklch
oklch(86.5% 0.070 92.1)

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

#AFC9A2

Celadon · DarkGray · Apple Green

HEX
#AFC9A2
RGB
rgb(175, 201, 162)
HSL
hsl(100, 27%, 71%)
HSB
hsb(100, 19%, 79%)
CMYK
cmyk(13%, 0%, 19%, 21%)
Oklch
oklch(80.6% 0.061 135.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#A5BD8B

Willow Green · DarkSeaGreen · Apple Green

HEX
#A5BD8B
RGB
rgb(165, 189, 139)
HSL
hsl(89, 27%, 64%)
HSB
hsb(89, 26%, 74%)
CMYK
cmyk(13%, 0%, 26%, 26%)
Oklch
oklch(76.7% 0.074 128.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D97947

Tangerine · Coral · Warm Sun

HEX
#D97947
RGB
rgb(217, 121, 71)
HSL
hsl(21, 66%, 56%)
HSB
hsb(21, 67%, 85%)
CMYK
cmyk(0%, 44%, 67%, 15%)
Oklch
oklch(67.3% 0.136 46.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D95550

Vermilion · Tomato · Passion Red

HEX
#D95550
RGB
rgb(217, 85, 80)
HSL
hsl(2, 64%, 58%)
HSB
hsb(2, 63%, 85%)
CMYK
cmyk(0%, 61%, 63%, 15%)
Oklch
oklch(62.2% 0.167 25.3)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3D29E
9CAEE2

Analogous

E2AE9C
E3D29E
D1E29C

Triadic

E3D29E
9CE2D1
D19CE2

Split-Comp.

E3D29E
9CD1E2
AE9CE2

Tetradic

E3D29E
9CE2AE
9CAEE2
E29CD1

Contrast Matrix WCAG 2.1 Contrast

E3D29E
AFC9A2
A5BD8B
D97947
D95550
—
1.2
Fail
1.4
Fail
2.1
Fail
2.6
Fail
1.2
Fail
—
1.1
Fail
1.7
Fail
2.2
Fail
1.4
Fail
1.1
Fail
—
1.5
Fail
1.9
Fail
2.1
Fail
1.7
Fail
1.5
Fail
—
1.3
Fail
2.6
Fail
2.2
Fail
1.9
Fail
1.3
Fail
—
White BG
1.5Fail
1.8Fail
2.0Fail
3.1AA Large
3.9AA Large
Black BG
14.0AAA
11.7AAA
10.3AAA
6.8AA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDBAB
BABAAB
AFB097
AFAF53
A09F51

Deuteranopia

DDDEAE
B9B7AE
AEAC9A
B5BC56
A8B152

Tritanopia

E2B5B7
B0B3B5
A6A1A3
D45D5F
D25252

Achromatopsia

D1D1D1
BDBDBD
B0B0B0
909090
7C7C7C

Shades & Tints Shades & Tints

#E3D29E

Dark
Light

#AFC9A2

Dark
Light

#A5BD8B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3d29e;
  --color-2: #afc9a2;
  --color-3: #a5bd8b;
  --color-4: #d97947;
  --color-5: #d95550;
}

SCSS

$color-1: #e3d29e;
$color-2: #afc9a2;
$color-3: #a5bd8b;
$color-4: #d97947;
$color-5: #d95550;

TAILWIND

colors: {
  'brand-1': '#e3d29e',
  'brand-2': '#afc9a2',
  'brand-3': '#a5bd8b',
  'brand-4': '#d97947',
  'brand-5': '#d95550',
}

RGB Array

[227, 210, 158], [175, 201, 162], [165, 189, 139], [217, 121, 71], [217, 85, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3D29E, #AFC9A2, #A5BD8B, #D97947, #D95550 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: #e3d29e; --color-2: #afc9a2; --color-3: #a5bd8b; --color-4: #d97947; --color-5: #d95550. 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