← Back to Editor

#E8D092 · #BDBA8F · #97AF8F · #AE7E67 · #E9721E

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

#E8D092

Goose Yellow · Khaki · Sunflower

HEX
#E8D092
RGB
rgb(232, 208, 146)
HSL
hsl(43, 65%, 74%)
HSB
hsb(43, 37%, 91%)
CMYK
cmyk(0%, 10%, 37%, 9%)
Oklch
oklch(86.3% 0.084 89.3)

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

#BDBA8F

Fresh Green · Tan · Sunflower

HEX
#BDBA8F
RGB
rgb(189, 186, 143)
HSL
hsl(56, 26%, 65%)
HSB
hsb(56, 24%, 74%)
CMYK
cmyk(0%, 2%, 24%, 26%)
Oklch
oklch(78.0% 0.058 104.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#97AF8F

Celadon · DarkSeaGreen · Apple Green

HEX
#97AF8F
RGB
rgb(151, 175, 143)
HSL
hsl(105, 17%, 62%)
HSB
hsb(105, 18%, 69%)
CMYK
cmyk(14%, 0%, 18%, 31%)
Oklch
oklch(72.7% 0.053 137.9)

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

#AE7E67

Tangerine · Gray · Warm Sun

HEX
#AE7E67
RGB
rgb(174, 126, 103)
HSL
hsl(19, 30%, 54%)
HSB
hsb(19, 41%, 68%)
CMYK
cmyk(0%, 28%, 41%, 32%)
Oklch
oklch(63.5% 0.069 46.6)

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

#E9721E

Tangerine · Chocolate · Warm Sun

HEX
#E9721E
RGB
rgb(233, 114, 30)
HSL
hsl(25, 82%, 52%)
HSB
hsb(25, 87%, 91%)
CMYK
cmyk(0%, 51%, 87%, 9%)
Oklch
oklch(68.1% 0.171 49.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8D092
92AAE8

Analogous

E8A492
E8D092
D5E892

Triadic

E8D092
92E8CF
CF92E8

Split-Comp.

E8D092
92D5E8
A492E8

Tetradic

E8D092
92E8A4
92AAE8
E892D5

Contrast Matrix WCAG 2.1 Contrast

E8D092
BDBA8F
97AF8F
AE7E67
E9721E
—
1.3
Fail
1.6
Fail
2.3
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
1.8
Fail
1.5
Fail
1.6
Fail
1.2
Fail
—
1.5
Fail
1.3
Fail
2.3
Fail
1.8
Fail
1.5
Fail
—
1.2
Fail
2.0
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
White BG
1.5Fail
2.0Fail
2.4Fail
3.5AA Large
3.0AA Large
Black BG
13.9AAA
10.6AAA
8.8AAA
6.0AA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDDA1
BCBC99
A1A297
99996D
B5B432

Deuteranopia

DFE1A5
BCBC9C
A09E99
9CA06E
BCC537

Tritanopia

E7ADAF
BDA2A3
989D9E
AC7172
E34246

Achromatopsia

D0D0D0
B6B6B6
A4A4A4
8A8A8A
8C8C8C

Shades & Tints Shades & Tints

#E8D092

Dark
Light

#BDBA8F

Dark
Light

#97AF8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8d092;
  --color-2: #bdba8f;
  --color-3: #97af8f;
  --color-4: #ae7e67;
  --color-5: #e9721e;
}

SCSS

$color-1: #e8d092;
$color-2: #bdba8f;
$color-3: #97af8f;
$color-4: #ae7e67;
$color-5: #e9721e;

TAILWIND

colors: {
  'brand-1': '#e8d092',
  'brand-2': '#bdba8f',
  'brand-3': '#97af8f',
  'brand-4': '#ae7e67',
  'brand-5': '#e9721e',
}

RGB Array

[232, 208, 146], [189, 186, 143], [151, 175, 143], [174, 126, 103], [233, 114, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8D092, #BDBA8F, #97AF8F, #AE7E67, #E9721E 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: #e8d092; --color-2: #bdba8f; --color-3: #97af8f; --color-4: #ae7e67; --color-5: #e9721e. 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