← Back to Editor

#9BC7B2 · #878467 · #D6D4AD · #CD604B · #EBA981

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

#9BC7B2

Jade · DarkGray · Apple Green

HEX
#9BC7B2
RGB
rgb(155, 199, 178)
HSL
hsl(151, 28%, 69%)
HSB
hsb(151, 22%, 78%)
CMYK
cmyk(22%, 0%, 11%, 22%)
Oklch
oklch(79.2% 0.055 164.3)

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

#878467

Autumn Sage · Gray · Honey Gold

HEX
#878467
RGB
rgb(135, 132, 103)
HSL
hsl(54, 13%, 47%)
HSB
hsb(54, 24%, 53%)
CMYK
cmyk(0%, 2%, 24%, 47%)
Oklch
oklch(60.8% 0.042 102.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D6D4AD

Fresh Green · Wheat · Lemon Cream

HEX
#D6D4AD
RGB
rgb(214, 212, 173)
HSL
hsl(57, 33%, 76%)
HSB
hsb(57, 19%, 84%)
CMYK
cmyk(0%, 1%, 19%, 16%)
Oklch
oklch(86.2% 0.052 105.0)

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

#CD604B

Crimson · Chocolate · Passion Red

HEX
#CD604B
RGB
rgb(205, 96, 75)
HSL
hsl(10, 57%, 55%)
HSB
hsb(10, 63%, 80%)
CMYK
cmyk(0%, 53%, 63%, 20%)
Oklch
oklch(61.8% 0.143 32.5)

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

#EBA981

Apricot · DarkSalmon · Warm Sun

HEX
#EBA981
RGB
rgb(235, 169, 129)
HSL
hsl(23, 73%, 71%)
HSB
hsb(23, 45%, 92%)
CMYK
cmyk(0%, 28%, 45%, 8%)
Oklch
oklch(78.8% 0.095 52.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BC7B2
C69AAF

Analogous

9AC69B
9BC7B2
9AC5C6

Triadic

9BC7B2
B19AC6
C6B19A

Split-Comp.

9BC7B2
C69AC5
C69B9A

Tetradic

9BC7B2
9B9AC6
C69AAF
C5C69A

Contrast Matrix WCAG 2.1 Contrast

9BC7B2
878467
D6D4AD
CD604B
EBA981
—
2.0
Fail
1.2
Fail
2.1
Fail
1.1
Fail
2.0
Fail
—
2.5
Fail
1.0
Fail
1.9
Fail
1.2
Fail
2.5
Fail
—
2.6
Fail
1.3
Fail
2.1
Fail
1.0
Fail
2.6
Fail
—
2.0
Fail
1.1
Fail
1.9
Fail
1.3
Fail
2.0
Fail
—
White BG
1.9Fail
3.8AA Large
1.5Fail
3.9AA Large
2.0Fail
Black BG
11.2AAA
5.5AA
13.9AAA
5.4AA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAEB7
86866E
D5D5B6
9E9D50
CECE8B

Deuteranopia

ACA8B8
868670
D5D5B9
A4AC51
D2D78D

Tritanopia

9DBBBC
877475
D6BEC0
C85455
E89294

Achromatopsia

B7B7B7
828282
D0D0D0
7E7E7E
B8B8B8

Shades & Tints Shades & Tints

#9BC7B2

Dark
Light

#878467

Dark
Light

#D6D4AD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bc7b2;
  --color-2: #878467;
  --color-3: #d6d4ad;
  --color-4: #cd604b;
  --color-5: #eba981;
}

SCSS

$color-1: #9bc7b2;
$color-2: #878467;
$color-3: #d6d4ad;
$color-4: #cd604b;
$color-5: #eba981;

TAILWIND

colors: {
  'brand-1': '#9bc7b2',
  'brand-2': '#878467',
  'brand-3': '#d6d4ad',
  'brand-4': '#cd604b',
  'brand-5': '#eba981',
}

RGB Array

[155, 199, 178], [135, 132, 103], [214, 212, 173], [205, 96, 75], [235, 169, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BC7B2, #878467, #D6D4AD, #CD604B, #EBA981 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: #9bc7b2; --color-2: #878467; --color-3: #d6d4ad; --color-4: #cd604b; --color-5: #eba981. 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