← Back to Editor

#CDDFC6 · #D0C198 · #E59E6F · #968D54 · #6C7968

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

#CDDFC6

Celadon · LightGray · Mint Green

HEX
#CDDFC6
RGB
rgb(205, 223, 198)
HSL
hsl(103, 28%, 83%)
HSB
hsb(103, 11%, 87%)
CMYK
cmyk(8%, 0%, 11%, 13%)
Oklch
oklch(88.3% 0.039 136.9)

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

#D0C198

Goose Yellow · Tan · Sunflower

HEX
#D0C198
RGB
rgb(208, 193, 152)
HSL
hsl(44, 37%, 71%)
HSB
hsb(44, 27%, 82%)
CMYK
cmyk(0%, 7%, 27%, 18%)
Oklch
oklch(81.3% 0.057 90.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E59E6F

Apricot · DarkSalmon · Warm Sun

HEX
#E59E6F
RGB
rgb(229, 158, 111)
HSL
hsl(24, 69%, 67%)
HSB
hsb(24, 52%, 90%)
CMYK
cmyk(0%, 31%, 52%, 10%)
Oklch
oklch(75.8% 0.105 54.0)

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

#968D54

Autumn Sage · Gray · Honey Gold

HEX
#968D54
RGB
rgb(150, 141, 84)
HSL
hsl(52, 28%, 46%)
HSB
hsb(52, 44%, 59%)
CMYK
cmyk(0%, 6%, 44%, 41%)
Oklch
oklch(63.8% 0.078 100.4)

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

#6C7968

Celadon · DimGray · Warm Gray

HEX
#6C7968
RGB
rgb(108, 121, 104)
HSL
hsl(106, 8%, 44%)
HSB
hsb(106, 14%, 47%)
CMYK
cmyk(11%, 0%, 14%, 53%)
Oklch
oklch(56.0% 0.030 138.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDDFC6
D9C8E0

Analogous

DBE0C8
CDDFC6
C8E0CD

Triadic

CDDFC6
C8CEE0
E0C8CE

Split-Comp.

CDDFC6
CDC8E0
E0C8DB

Tetradic

CDDFC6
C8DBE0
D9C8E0
E0CDC8

Contrast Matrix WCAG 2.1 Contrast

CDDFC6
D0C198
E59E6F
968D54
6C7968
—
1.3
Fail
1.6
Fail
2.4
Fail
3.3
AA Large
1.3
Fail
—
1.2
Fail
1.9
Fail
2.6
Fail
1.6
Fail
1.2
Fail
—
1.5
Fail
2.1
Fail
2.4
Fail
1.9
Fail
1.5
Fail
—
1.4
Fail
3.3
AA Large
2.6
Fail
2.1
Fail
1.4
Fail
—
White BG
1.4Fail
1.8Fail
2.2Fail
3.4AA Large
4.6AA
Black BG
15.0AAA
11.8AAA
9.5AAA
6.2AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5CC
CAC9A2
C6C67A
929262
72726C

Deuteranopia

D4D2CE
CACCA4
CAD07D
939365
71706D

Tritanopia

CED1D2
CFAAAB
E18385
966D6F
6D6F70

Achromatopsia

D7D7D7
C1C1C1
AEAEAE
898989
737373

Shades & Tints Shades & Tints

#CDDFC6

Dark
Light

#D0C198

Dark
Light

#E59E6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cddfc6;
  --color-2: #d0c198;
  --color-3: #e59e6f;
  --color-4: #968d54;
  --color-5: #6c7968;
}

SCSS

$color-1: #cddfc6;
$color-2: #d0c198;
$color-3: #e59e6f;
$color-4: #968d54;
$color-5: #6c7968;

TAILWIND

colors: {
  'brand-1': '#cddfc6',
  'brand-2': '#d0c198',
  'brand-3': '#e59e6f',
  'brand-4': '#968d54',
  'brand-5': '#6c7968',
}

RGB Array

[205, 223, 198], [208, 193, 152], [229, 158, 111], [150, 141, 84], [108, 121, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDDFC6, #D0C198, #E59E6F, #968D54, #6C7968 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: #cddfc6; --color-2: #d0c198; --color-3: #e59e6f; --color-4: #968d54; --color-5: #6c7968. 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