← Back to Editor

#CCD69D · #A9C6AA · #7F8A9E · #6D5683 · #5D3E5D

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 LibraryData Visualization

Color Details Color Details

#CCD69D

Willow Green · Tan · Apple Green

HEX
#CCD69D
RGB
rgb(204, 214, 157)
HSL
hsl(71, 41%, 73%)
HSB
hsb(71, 27%, 84%)
CMYK
cmyk(5%, 0%, 27%, 16%)
Oklch
oklch(85.4% 0.076 116.1)

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

#A9C6AA

Celadon · DarkGray · Apple Green

HEX
#A9C6AA
RGB
rgb(169, 198, 170)
HSL
hsl(122, 20%, 72%)
HSB
hsb(122, 15%, 78%)
CMYK
cmyk(15%, 0%, 14%, 22%)
Oklch
oklch(79.7% 0.050 146.0)

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

#7F8A9E

Azure · LightSlateGray · Navy Blue

HEX
#7F8A9E
RGB
rgb(127, 138, 158)
HSL
hsl(219, 14%, 56%)
HSB
hsb(219, 20%, 62%)
CMYK
cmyk(20%, 13%, 0%, 38%)
Oklch
oklch(63.1% 0.033 262.5)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#6D5683

Dark Plum · DimGray · Violet

HEX
#6D5683
RGB
rgb(109, 86, 131)
HSL
hsl(271, 21%, 43%)
HSB
hsb(271, 34%, 51%)
CMYK
cmyk(17%, 34%, 0%, 49%)
Oklch
oklch(49.4% 0.075 307.2)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#5D3E5D

Rose Purple · DimGray · Eggplant

HEX
#5D3E5D
RGB
rgb(93, 62, 93)
HSL
hsl(300, 20%, 30%)
HSB
hsb(300, 33%, 36%)
CMYK
cmyk(0%, 33%, 0%, 64%)
Oklch
oklch(41.1% 0.064 326.7)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCD69D
A89ED6

Analogous

D6C59E
CCD69D
B0D69E

Triadic

CCD69D
9ECCD6
D69ECC

Split-Comp.

CCD69D
9EB0D6
C59ED6

Tetradic

CCD69D
9ED6C5
A89ED6
D69EB0

Contrast Matrix WCAG 2.1 Contrast

CCD69D
A9C6AA
7F8A9E
6D5683
5D3E5D
—
1.2
Fail
2.3
Fail
4.1
AA Large
5.9
AA
1.2
Fail
—
1.9
Fail
3.4
AA Large
4.9
AA
2.3
Fail
1.9
Fail
—
1.8
Fail
2.6
Fail
4.1
AA Large
3.4
AA Large
1.8
Fail
—
1.4
Fail
5.9
AA
4.9
AA
2.6
Fail
1.4
Fail
—
White BG
1.5Fail
1.9Fail
3.5AA Large
6.3AA
9.1AAA
Black BG
13.7AAA
11.3AAA
6.0AA
3.3AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0AB
B6B6B1
848499
636378
504F55

Deuteranopia

D0CFAE
B4B2B2
838298
646675
515454

Tritanopia

CCB6B8
AAB6B7
809595
6C706E
5B504E

Achromatopsia

CDCDCD
BABABA
898989
626262
4B4B4B

Shades & Tints Shades & Tints

#CCD69D

Dark
Light

#A9C6AA

Dark
Light

#7F8A9E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccd69d;
  --color-2: #a9c6aa;
  --color-3: #7f8a9e;
  --color-4: #6d5683;
  --color-5: #5d3e5d;
}

SCSS

$color-1: #ccd69d;
$color-2: #a9c6aa;
$color-3: #7f8a9e;
$color-4: #6d5683;
$color-5: #5d3e5d;

TAILWIND

colors: {
  'brand-1': '#ccd69d',
  'brand-2': '#a9c6aa',
  'brand-3': '#7f8a9e',
  'brand-4': '#6d5683',
  'brand-5': '#5d3e5d',
}

RGB Array

[204, 214, 157], [169, 198, 170], [127, 138, 158], [109, 86, 131], [93, 62, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCD69D, #A9C6AA, #7F8A9E, #6D5683, #5D3E5D is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #ccd69d; --color-2: #a9c6aa; --color-3: #7f8a9e; --color-4: #6d5683; --color-5: #5d3e5d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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