← Back to Editor

#8CAA8E · #AFAC8D · #C7BA85 · #D4C175 · #CED173

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

#8CAA8E

Celadon · DarkSeaGreen · Apple Green

HEX
#8CAA8E
RGB
rgb(140, 170, 142)
HSL
hsl(124, 15%, 61%)
HSB
hsb(124, 18%, 67%)
CMYK
cmyk(18%, 0%, 16%, 33%)
Oklch
oklch(70.7% 0.052 146.8)

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

#AFAC8D

Fresh Green · DarkGray · Sunflower

HEX
#AFAC8D
RGB
rgb(175, 172, 141)
HSL
hsl(55, 18%, 62%)
HSB
hsb(55, 19%, 69%)
CMYK
cmyk(0%, 2%, 19%, 31%)
Oklch
oklch(73.9% 0.043 102.8)

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

#C7BA85

Ginger · Tan · Sunflower

HEX
#C7BA85
RGB
rgb(199, 186, 133)
HSL
hsl(48, 37%, 65%)
HSB
hsb(48, 33%, 78%)
CMYK
cmyk(0%, 7%, 33%, 22%)
Oklch
oklch(78.7% 0.072 96.0)

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

#D4C175

Ginger · BurlyWood · Sunflower

HEX
#D4C175
RGB
rgb(212, 193, 117)
HSL
hsl(48, 52%, 65%)
HSB
hsb(48, 45%, 83%)
CMYK
cmyk(0%, 9%, 45%, 17%)
Oklch
oklch(81.0% 0.099 95.8)

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

#CED173

Fresh Green · BurlyWood · Sunflower

HEX
#CED173
RGB
rgb(206, 209, 115)
HSL
hsl(62, 51%, 64%)
HSB
hsb(62, 45%, 82%)
CMYK
cmyk(1%, 0%, 45%, 18%)
Oklch
oklch(83.8% 0.118 110.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CAA8E
AA8DA8

Analogous

9AAA8D
8CAA8E
8DAA9E

Triadic

8CAA8E
8F8DAA
AA8F8D

Split-Comp.

8CAA8E
9E8DAA
AA8D9A

Tetradic

8CAA8E
8D9AAA
AA8DA8
AA9E8D

Contrast Matrix WCAG 2.1 Contrast

8CAA8E
AFAC8D
C7BA85
D4C175
CED173
—
1.1
Fail
1.3
Fail
1.4
Fail
1.6
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.6
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
White BG
2.5Fail
2.3Fail
1.9Fail
1.8Fail
1.6Fail
Black BG
8.3AAA
9.1AAA
10.8AAA
11.7AAA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

999995
AEAE95
C1C192
CCCC87
CFCF8A

Deuteranopia

979596
AEAE96
C2C395
CDCE8C
CFCF8F

Tritanopia

8E9A9B
AF9A9C
C69C9E
D39699
CE9CA0

Achromatopsia

9E9E9E
A9A9A9
B8B8B8
BEBEBE
C5C5C5

Shades & Tints Shades & Tints

#8CAA8E

Dark
Light

#AFAC8D

Dark
Light

#C7BA85

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8caa8e;
  --color-2: #afac8d;
  --color-3: #c7ba85;
  --color-4: #d4c175;
  --color-5: #ced173;
}

SCSS

$color-1: #8caa8e;
$color-2: #afac8d;
$color-3: #c7ba85;
$color-4: #d4c175;
$color-5: #ced173;

TAILWIND

colors: {
  'brand-1': '#8caa8e',
  'brand-2': '#afac8d',
  'brand-3': '#c7ba85',
  'brand-4': '#d4c175',
  'brand-5': '#ced173',
}

RGB Array

[140, 170, 142], [175, 172, 141], [199, 186, 133], [212, 193, 117], [206, 209, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8CAA8E, #AFAC8D, #C7BA85, #D4C175, #CED173 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: #8caa8e; --color-2: #afac8d; --color-3: #c7ba85; --color-4: #d4c175; --color-5: #ced173. 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