#C8CCC2 + #CED6C1 + #CCE6A5 + #CDFC86 + #C2FF66 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C8CCC2

Willow Green · Silver · Pearl Gray

HEX

#C8CCC2

RGB

rgb(200, 204, 194)

HSL

hsl(84, 9%, 78%)

HSB

hsb(84, 5%, 80%)

CMYK

cmyk(2%, 0%, 5%, 20%)

Oklch

oklch(83.9% 0.014 124.6)

Traditional「Willow Green」· Paint「Pearl Gray」· Creative Silver Lining

#CED6C1

Willow Green · LightGray · Apple Green

HEX

#CED6C1

RGB

rgb(206, 214, 193)

HSL

hsl(83, 20%, 80%)

HSB

hsb(83, 10%, 84%)

CMYK

cmyk(4%, 0%, 10%, 16%)

Oklch

oklch(86.4% 0.030 124.1)

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

#CCE6A5

Willow Green · Khaki · Apple Green

HEX

#CCE6A5

RGB

rgb(204, 230, 165)

HSL

hsl(84, 57%, 77%)

HSB

hsb(84, 28%, 90%)

CMYK

cmyk(11%, 0%, 28%, 10%)

Oklch

oklch(89.0% 0.090 125.9)

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

#CDFC86

Willow Green · Khaki · Apple Green

HEX

#CDFC86

RGB

rgb(205, 252, 134)

HSL

hsl(84, 95%, 76%)

HSB

hsb(84, 47%, 99%)

CMYK

cmyk(19%, 0%, 47%, 1%)

Oklch

oklch(93.3% 0.155 127.0)

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

#C2FF66

Willow Green · GreenYellow · Apple Green

HEX

#C2FF66

RGB

rgb(194, 255, 102)

HSL

hsl(84, 100%, 70%)

HSB

hsb(84, 60%, 100%)

CMYK

cmyk(24%, 0%, 60%, 0%)

Oklch

oklch(92.9% 0.192 128.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8CCC2

C6C2CC

Analogous

CCCBC2

C8CCC2

C3CCC2

Triadic

C8CCC2

C2C8CC

CCC2C8

Split-Comp.

C8CCC2

C2C3CC

CBC2CC

Tetradic

C8CCC2

C2CCCB

C6C2CC

CCC2C3

Contrast Matrix WCAG 2.1 Contrast

C8CCC2	CED6C1	CCE6A5	CDFC86	C2FF66
—	1.1 Fail	1.2 Fail	1.4 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.2 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.0 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.0 Fail	—

White BG

1.6Fail

1.5Fail

1.4Fail

1.2Fail

Black BG

12.9AAA

14.0AAA

15.4AAA

17.9AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACAC4

D1D2C6

D7D7B5

E1E2A3

DCDD8B

Deuteranopia

CAC9C5

D1D0C7

D6D4B9

DFDBA9

D9D494

Tritanopia

C8C6C7

CECACB

CDC1C4

CFB9BE

C5A8AF

Achromatopsia

CACACA

D1D1D1

D7D7D7

E0E0E0

DBDBDB

Shades & Tints Shades & Tints

#C8CCC2

Dark

Light

#CED6C1

Dark

Light

#CCE6A5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8ccc2;
  --color-2: #ced6c1;
  --color-3: #cce6a5;
  --color-4: #cdfc86;
  --color-5: #c2ff66;
}

SCSS

$color-1: #c8ccc2;
$color-2: #ced6c1;
$color-3: #cce6a5;
$color-4: #cdfc86;
$color-5: #c2ff66;

TAILWIND

colors: {
  'brand-1': '#c8ccc2',
  'brand-2': '#ced6c1',
  'brand-3': '#cce6a5',
  'brand-4': '#cdfc86',
  'brand-5': '#c2ff66',
}

RGB Array

[200, 204, 194], [206, 214, 193], [204, 230, 165], [205, 252, 134], [194, 255, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8CCC2, #CED6C1, #CCE6A5, #CDFC86, #C2FF66 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: #c8ccc2; --color-2: #ced6c1; --color-3: #cce6a5; --color-4: #cdfc86; --color-5: #c2ff66. 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