← Back to Editor

#E5B962 · #BDB06A · #9EB28F · #9AC1C0 · #8FD8E1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E5B962

Ginger · SandyBrown · Sunflower

HEX
#E5B962
RGB
rgb(229, 185, 98)
HSL
hsl(40, 72%, 64%)
HSB
hsb(40, 57%, 90%)
CMYK
cmyk(0%, 19%, 57%, 10%)
Oklch
oklch(80.8% 0.117 82.8)

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

#BDB06A

Autumn Sage · Tan · Sunflower

HEX
#BDB06A
RGB
rgb(189, 176, 106)
HSL
hsl(51, 39%, 58%)
HSB
hsb(51, 44%, 74%)
CMYK
cmyk(0%, 7%, 44%, 26%)
Oklch
oklch(75.2% 0.092 99.0)

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

#9EB28F

Celadon · DarkSeaGreen · Apple Green

HEX
#9EB28F
RGB
rgb(158, 178, 143)
HSL
hsl(94, 19%, 63%)
HSB
hsb(94, 20%, 70%)
CMYK
cmyk(11%, 0%, 20%, 30%)
Oklch
oklch(73.9% 0.054 131.9)

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

#9AC1C0

Jade · DarkGray · Lake Green

HEX
#9AC1C0
RGB
rgb(154, 193, 192)
HSL
hsl(178, 24%, 68%)
HSB
hsb(178, 20%, 76%)
CMYK
cmyk(20%, 0%, 1%, 24%)
Oklch
oklch(78.2% 0.042 194.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#8FD8E1

Sky Blue · SkyBlue · Lake Green

HEX
#8FD8E1
RGB
rgb(143, 216, 225)
HSL
hsl(187, 58%, 72%)
HSB
hsb(187, 36%, 88%)
CMYK
cmyk(36%, 4%, 0%, 12%)
Oklch
oklch(83.7% 0.074 205.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5B962
618DE5

Analogous

E57761
E5B962
CFE561

Triadic

E5B962
61E5B9
B961E5

Split-Comp.

E5B962
61CFE5
7761E5

Tetradic

E5B962
61E577
618DE5
E561CF

Contrast Matrix WCAG 2.1 Contrast

E5B962
BDB06A
9EB28F
9AC1C0
8FD8E1
—
1.2
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
1.0
Fail
1.1
Fail
1.4
Fail
1.2
Fail
1.0
Fail
—
1.2
Fail
1.4
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.1
Fail
1.4
Fail
1.4
Fail
1.2
Fail
—
White BG
1.8Fail
2.2Fail
2.3Fail
2.0Fail
1.6Fail
Black BG
11.4AAA
9.6AAA
9.2AAA
10.8AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D277
B7B77B
A7A797
ABABC0
AFAFDF

Deuteranopia

D5D87C
B8B97F
A6A49A
A9A6C0
AAA5DE

Tritanopia

E3888B
BC888B
9F9EA0
9CC0C0
93DDDD

Achromatopsia

BCBCBC
ACACAC
A8A8A8
B5B5B5
C3C3C3

Shades & Tints Shades & Tints

#E5B962

Dark
Light

#BDB06A

Dark
Light

#9EB28F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5b962;
  --color-2: #bdb06a;
  --color-3: #9eb28f;
  --color-4: #9ac1c0;
  --color-5: #8fd8e1;
}

SCSS

$color-1: #e5b962;
$color-2: #bdb06a;
$color-3: #9eb28f;
$color-4: #9ac1c0;
$color-5: #8fd8e1;

TAILWIND

colors: {
  'brand-1': '#e5b962',
  'brand-2': '#bdb06a',
  'brand-3': '#9eb28f',
  'brand-4': '#9ac1c0',
  'brand-5': '#8fd8e1',
}

RGB Array

[229, 185, 98], [189, 176, 106], [158, 178, 143], [154, 193, 192], [143, 216, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E5B962, #BDB06A, #9EB28F, #9AC1C0, #8FD8E1 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: #e5b962; --color-2: #bdb06a; --color-3: #9eb28f; --color-4: #9ac1c0; --color-5: #8fd8e1. 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