#8B8C84 + #CFA69D + #D6C272 + #C6DBAA + #85D6AC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8B8C84

Ash · Gray · Warm Gray

HEX

#8B8C84

RGB

rgb(139, 140, 132)

HSL

hsl(68, 3%, 53%)

HSB

hsb(68, 6%, 55%)

CMYK

cmyk(1%, 0%, 6%, 45%)

Oklch

oklch(63.7% 0.012 112.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#CFA69D

Peach Pink · Tan · Coral Red

HEX

#CFA69D

RGB

rgb(207, 166, 157)

HSL

hsl(11, 34%, 71%)

HSB

hsb(11, 24%, 81%)

CMYK

cmyk(0%, 20%, 24%, 19%)

Oklch

oklch(76.0% 0.050 32.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D6C272

Ginger · BurlyWood · Sunflower

HEX

#D6C272

RGB

rgb(214, 194, 114)

HSL

hsl(48, 55%, 64%)

HSB

hsb(48, 47%, 84%)

CMYK

cmyk(0%, 9%, 47%, 16%)

Oklch

oklch(81.4% 0.103 95.7)

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

#C6DBAA

Willow Green · Silver · Apple Green

HEX

#C6DBAA

RGB

rgb(198, 219, 170)

HSL

hsl(86, 40%, 76%)

HSB

hsb(86, 22%, 86%)

CMYK

cmyk(10%, 0%, 22%, 14%)

Oklch

oklch(86.3% 0.069 126.7)

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

#85D6AC

Celadon · MediumAquaMarine · Apple Green

HEX

#85D6AC

RGB

rgb(133, 214, 172)

HSL

hsl(149, 50%, 68%)

HSB

hsb(149, 38%, 84%)

CMYK

cmyk(38%, 0%, 20%, 16%)

Oklch

oklch(81.2% 0.100 160.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B8C84

85848B

Analogous

8B8884

8B8C84

868B84

Triadic

8B8C84

848A8B

8B848A

Split-Comp.

8B8C84

84868B

88848B

Tetradic

8B8C84

848B88

85848B

8B8486

Contrast Matrix WCAG 2.1 Contrast

8B8C84	CFA69D	D6C272	C6DBAA	85D6AC
—	1.6 Fail	1.9 Fail	2.3 Fail	2.0 Fail
1.6 Fail	—	1.2 Fail	1.5 Fail	1.3 Fail
1.9 Fail	1.2 Fail	—	1.2 Fail	1.0 Fail
2.3 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.0 Fail	1.3 Fail	1.0 Fail	1.2 Fail	—

White BG

3.4AA Large

2.2Fail

1.8Fail

1.5Fail

1.7Fail

Black BG

6.2AA

9.6AAA

11.8AAA

14.1AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8B86

BDBD9F

CDCD85

CFCFB6

A8A9B6

Deuteranopia

8B8B86

C0C3A0

CFD08A

CECCB9

A39DB9

Tritanopia

8B8788

CDA1A1

D59598

C7BFC1

89BEC0

Achromatopsia

8B8B8B

B1B1B1

BFBFBF

CFCFCF

B9B9B9

Shades & Tints Shades & Tints

#8B8C84

Dark

Light

#CFA69D

Dark

Light

#D6C272

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b8c84;
  --color-2: #cfa69d;
  --color-3: #d6c272;
  --color-4: #c6dbaa;
  --color-5: #85d6ac;
}

SCSS

$color-1: #8b8c84;
$color-2: #cfa69d;
$color-3: #d6c272;
$color-4: #c6dbaa;
$color-5: #85d6ac;

TAILWIND

colors: {
  'brand-1': '#8b8c84',
  'brand-2': '#cfa69d',
  'brand-3': '#d6c272',
  'brand-4': '#c6dbaa',
  'brand-5': '#85d6ac',
}

RGB Array

[139, 140, 132], [207, 166, 157], [214, 194, 114], [198, 219, 170], [133, 214, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B8C84, #CFA69D, #D6C272, #C6DBAA, #85D6AC is ideal for: health products, baby brands, fresh-style blogs. 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: #8b8c84; --color-2: #cfa69d; --color-3: #d6c272; --color-4: #c6dbaa; --color-5: #85d6ac. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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