#CDDF95 + #B1BA8E + #CAD3AA + #F9F7E1 + #D1EDE2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CDDF95

Willow Green · Khaki · Apple Green

HEX

#CDDF95

RGB

rgb(205, 223, 149)

HSL

hsl(75, 54%, 73%)

HSB

hsb(75, 33%, 87%)

CMYK

cmyk(8%, 0%, 33%, 13%)

Oklch

oklch(87.3% 0.098 119.6)

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

#B1BA8E

Willow Green · DarkGray · Apple Green

HEX

#B1BA8E

RGB

rgb(177, 186, 142)

HSL

hsl(72, 24%, 64%)

HSB

hsb(72, 24%, 73%)

CMYK

cmyk(5%, 0%, 24%, 27%)

Oklch

oklch(77.0% 0.061 117.2)

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

#CAD3AA

Willow Green · Silver · Apple Green

HEX

#CAD3AA

RGB

rgb(202, 211, 170)

HSL

hsl(73, 32%, 75%)

HSB

hsb(73, 19%, 83%)

CMYK

cmyk(4%, 0%, 19%, 17%)

Oklch

oklch(84.9% 0.056 117.7)

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

#F9F7E1

Fresh Green · Beige · Lemon Cream

HEX

#F9F7E1

RGB

rgb(249, 247, 225)

HSL

hsl(55, 67%, 93%)

HSB

hsb(55, 10%, 98%)

CMYK

cmyk(0%, 1%, 10%, 2%)

Oklch

oklch(97.2% 0.029 102.7)

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

#D1EDE2

Jade · LightGray · Mint Green

HEX

#D1EDE2

RGB

rgb(209, 237, 226)

HSL

hsl(156, 44%, 87%)

HSB

hsb(156, 12%, 93%)

CMYK

cmyk(12%, 0%, 5%, 7%)

Oklch

oklch(92.3% 0.033 170.0)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDDF95

A895DF

Analogous

DFCD95

CDDF95

A8DF95

Triadic

CDDF95

95CDDF

DF95CD

Split-Comp.

CDDF95

95A8DF

CD95DF

Tetradic

CDDF95

95DFCD

A895DF

DF95A8

Contrast Matrix WCAG 2.1 Contrast

CDDF95	B1BA8E	CAD3AA	F9F7E1	D1EDE2
—	1.4 Fail	1.1 Fail	1.3 Fail	1.2 Fail
1.4 Fail	—	1.3 Fail	1.9 Fail	1.6 Fail
1.1 Fail	1.3 Fail	—	1.4 Fail	1.3 Fail
1.3 Fail	1.9 Fail	1.4 Fail	—	1.1 Fail
1.2 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

1.4Fail

2.0Fail

1.6Fail

1.1Fail

1.2Fail

Black BG

14.6AAA

10.3AAA

13.4AAA

19.4AAA

16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5A7

B5B599

CECEB4

F8F8E6

DDDDE5

Deuteranopia

D4D2AB

B4B49B

CDCDB6

F8F8E8

DCD9E5

Tritanopia

CEB5B8

B1A1A3

CABCBD

F9EBEB

D2E7E7

Achromatopsia

D1D1D1

B2B2B2

CCCCCC

F5F5F5

E3E3E3

Shades & Tints Shades & Tints

#CDDF95

Dark

Light

#B1BA8E

Dark

Light

#CAD3AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cddf95;
  --color-2: #b1ba8e;
  --color-3: #cad3aa;
  --color-4: #f9f7e1;
  --color-5: #d1ede2;
}

SCSS

$color-1: #cddf95;
$color-2: #b1ba8e;
$color-3: #cad3aa;
$color-4: #f9f7e1;
$color-5: #d1ede2;

TAILWIND

colors: {
  'brand-1': '#cddf95',
  'brand-2': '#b1ba8e',
  'brand-3': '#cad3aa',
  'brand-4': '#f9f7e1',
  'brand-5': '#d1ede2',
}

RGB Array

[205, 223, 149], [177, 186, 142], [202, 211, 170], [249, 247, 225], [209, 237, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDDF95, #B1BA8E, #CAD3AA, #F9F7E1, #D1EDE2 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: #cddf95; --color-2: #b1ba8e; --color-3: #cad3aa; --color-4: #f9f7e1; --color-5: #d1ede2. 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