#CDC57E + #8C9898 + #A5CCB0 + #DED3B4 + #F6A88F · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CDC57E

Fresh Green · Tan · Sunflower

HEX

#CDC57E

RGB

rgb(205, 197, 126)

HSL

hsl(54, 44%, 65%)

HSB

hsb(54, 39%, 80%)

CMYK

cmyk(0%, 4%, 39%, 20%)

Oklch

oklch(81.4% 0.092 102.7)

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

#8C9898

Ash · LightSlateGray · Silver Sand

HEX

#8C9898

RGB

rgb(140, 152, 152)

HSL

hsl(180, 6%, 57%)

HSB

hsb(180, 8%, 60%)

CMYK

cmyk(8%, 0%, 0%, 40%)

Oklch

oklch(67.0% 0.014 196.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#A5CCB0

Celadon · Silver · Apple Green

HEX

#A5CCB0

RGB

rgb(165, 204, 176)

HSL

hsl(137, 28%, 72%)

HSB

hsb(137, 19%, 80%)

CMYK

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

Oklch

oklch(80.9% 0.057 153.8)

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

#DED3B4

Goose Yellow · Wheat · Lemon Cream

HEX

#DED3B4

RGB

rgb(222, 211, 180)

HSL

hsl(44, 39%, 79%)

HSB

hsb(44, 19%, 87%)

CMYK

cmyk(0%, 5%, 19%, 13%)

Oklch

oklch(86.8% 0.043 90.8)

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

#F6A88F

Apricot · LightSalmon · Peach Orange

HEX

#F6A88F

RGB

rgb(246, 168, 143)

HSL

hsl(15, 85%, 76%)

HSB

hsb(15, 42%, 96%)

CMYK

cmyk(0%, 32%, 42%, 4%)

Oklch

oklch(80.1% 0.099 38.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDC57E

7E86CD

Analogous

CD9E7E

CDC57E

AECD7E

Triadic

CDC57E

7ECDC5

C57ECD

Split-Comp.

CDC57E

7EAECD

9E7ECD

Tetradic

CDC57E

7ECD9E

7E86CD

CD7EAE

Contrast Matrix WCAG 2.1 Contrast

CDC57E	8C9898	A5CCB0	DED3B4	F6A88F
—	1.7 Fail	1.0 Fail	1.2 Fail	1.1 Fail
1.7 Fail	—	1.7 Fail	2.0 Fail	1.5 Fail
1.0 Fail	1.7 Fail	—	1.2 Fail	1.1 Fail
1.2 Fail	2.0 Fail	1.2 Fail	—	1.3 Fail
1.1 Fail	1.5 Fail	1.1 Fail	1.3 Fail	—

White BG

1.8Fail

3.0Fail

1.8Fail

1.5Fail

1.9Fail

Black BG

11.9AAA

7.1AAA

11.9AAA

14.1AAA

10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CAC98F

919198

B6B6B7

D9D9BC

D4D495

Deuteranopia

CACB93

919098

B4B1B8

DADBBD

D9DF97

Tritanopia

CD9DA0

8D9898

A7BCBD

DDC1C3

F29A9B

Achromatopsia

BFBFBF

949494

BDBDBD

D3D3D3

BCBCBC

Shades & Tints Shades & Tints

#CDC57E

Dark

Light

#8C9898

Dark

Light

#A5CCB0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdc57e;
  --color-2: #8c9898;
  --color-3: #a5ccb0;
  --color-4: #ded3b4;
  --color-5: #f6a88f;
}

SCSS

$color-1: #cdc57e;
$color-2: #8c9898;
$color-3: #a5ccb0;
$color-4: #ded3b4;
$color-5: #f6a88f;

TAILWIND

colors: {
  'brand-1': '#cdc57e',
  'brand-2': '#8c9898',
  'brand-3': '#a5ccb0',
  'brand-4': '#ded3b4',
  'brand-5': '#f6a88f',
}

RGB Array

[205, 197, 126], [140, 152, 152], [165, 204, 176], [222, 211, 180], [246, 168, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #CDC57E, #8C9898, #A5CCB0, #DED3B4, #F6A88F 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: #cdc57e; --color-2: #8c9898; --color-3: #a5ccb0; --color-4: #ded3b4; --color-5: #f6a88f. 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 cool-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