← Back to Editor

#CCD09E · #70877F · #84B796 · #9CC18D · #B4CFAE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCD09E

Fresh Green · Tan · Sunflower

HEX
#CCD09E
RGB
rgb(204, 208, 158)
HSL
hsl(65, 35%, 72%)
HSB
hsb(65, 24%, 82%)
CMYK
cmyk(2%, 0%, 24%, 18%)
Oklch
oklch(84.2% 0.067 111.5)

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

#70877F

Mineral Blue · Gray · Warm Gray

HEX
#70877F
RGB
rgb(112, 135, 127)
HSL
hsl(159, 9%, 48%)
HSB
hsb(159, 17%, 53%)
CMYK
cmyk(17%, 0%, 6%, 47%)
Oklch
oklch(60.3% 0.029 172.2)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#84B796

Celadon · DarkSeaGreen · Apple Green

HEX
#84B796
RGB
rgb(132, 183, 150)
HSL
hsl(141, 26%, 62%)
HSB
hsb(141, 28%, 72%)
CMYK
cmyk(28%, 0%, 18%, 28%)
Oklch
oklch(73.4% 0.072 155.8)

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

#9CC18D

Celadon · DarkSeaGreen · Apple Green

HEX
#9CC18D
RGB
rgb(156, 193, 141)
HSL
hsl(103, 30%, 65%)
HSB
hsb(103, 27%, 76%)
CMYK
cmyk(19%, 0%, 27%, 24%)
Oklch
oklch(77.0% 0.082 136.8)

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

#B4CFAE

Celadon · Silver · Apple Green

HEX
#B4CFAE
RGB
rgb(180, 207, 174)
HSL
hsl(109, 26%, 75%)
HSB
hsb(109, 16%, 81%)
CMYK
cmyk(13%, 0%, 16%, 19%)
Oklch
oklch(82.5% 0.054 140.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCD09E
A39FD1

Analogous

D1BC9F
CCD09E
B3D19F

Triadic

CCD09E
9FCCD1
D19FCC

Split-Comp.

CCD09E
9FB3D1
BC9FD1

Tetradic

CCD09E
9FD1BC
A39FD1
D19FB3

Contrast Matrix WCAG 2.1 Contrast

CCD09E
70877F
84B796
9CC18D
B4CFAE
—
2.4
Fail
1.4
Fail
1.3
Fail
1.0
Fail
2.4
Fail
—
1.7
Fail
1.9
Fail
2.3
Fail
1.4
Fail
1.7
Fail
—
1.1
Fail
1.4
Fail
1.3
Fail
1.9
Fail
1.1
Fail
—
1.2
Fail
1.0
Fail
2.3
Fail
1.4
Fail
1.2
Fail
—
White BG
1.6Fail
3.8AA Large
2.3Fail
2.0Fail
1.7Fail
Black BG
13.1AAA
5.5AA
9.2AAA
10.4AAA
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEAA
7A7A81
9A9B9E
ACAC9A
C0C0B6

Deuteranopia

CECDAD
797781
9793A0
AAA79D
BEBCB8

Tritanopia

CCB4B6
718283
87A4A6
9EA4A6
B5BCBE

Achromatopsia

C9C9C9
7F7F7F
A4A4A4
B0B0B0
C3C3C3

Shades & Tints Shades & Tints

#CCD09E

Dark
Light

#70877F

Dark
Light

#84B796

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccd09e;
  --color-2: #70877f;
  --color-3: #84b796;
  --color-4: #9cc18d;
  --color-5: #b4cfae;
}

SCSS

$color-1: #ccd09e;
$color-2: #70877f;
$color-3: #84b796;
$color-4: #9cc18d;
$color-5: #b4cfae;

TAILWIND

colors: {
  'brand-1': '#ccd09e',
  'brand-2': '#70877f',
  'brand-3': '#84b796',
  'brand-4': '#9cc18d',
  'brand-5': '#b4cfae',
}

RGB Array

[204, 208, 158], [112, 135, 127], [132, 183, 150], [156, 193, 141], [180, 207, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCD09E, #70877F, #84B796, #9CC18D, #B4CFAE is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ccd09e; --color-2: #70877f; --color-3: #84b796; --color-4: #9cc18d; --color-5: #b4cfae. 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. Restrained colors convey professionalism and trust. 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