#CDD7B3 + #ABC2A1 + #9EEE72 + #BFF4AC + #DEEED5 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGrounded

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#CDD7B3

Willow Green · Silver · Apple Green

HEX

#CDD7B3

RGB

rgb(205, 215, 179)

HSL

hsl(77, 31%, 77%)

HSB

hsb(77, 17%, 84%)

CMYK

cmyk(5%, 0%, 17%, 16%)

Oklch

oklch(86.2% 0.050 120.1)

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

#ABC2A1

Celadon · DarkGray · Apple Green

HEX

#ABC2A1

RGB

rgb(171, 194, 161)

HSL

hsl(102, 21%, 70%)

HSB

hsb(102, 17%, 76%)

CMYK

cmyk(12%, 0%, 17%, 24%)

Oklch

oklch(78.8% 0.052 136.2)

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

#9EEE72

Emerald · LightGreen · Apple Green

HEX

#9EEE72

RGB

rgb(158, 238, 114)

HSL

hsl(99, 78%, 69%)

HSB

hsb(99, 52%, 93%)

CMYK

cmyk(34%, 0%, 52%, 7%)

Oklch

oklch(87.1% 0.177 135.7)

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

#BFF4AC

Emerald · LightGray · Mint Green

HEX

#BFF4AC

RGB

rgb(191, 244, 172)

HSL

hsl(104, 77%, 82%)

HSB

hsb(104, 30%, 96%)

CMYK

cmyk(22%, 0%, 30%, 4%)

Oklch

oklch(91.3% 0.110 137.6)

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

#DEEED5

Celadon · Beige · Mint Green

HEX

#DEEED5

RGB

rgb(222, 238, 213)

HSL

hsl(98, 42%, 88%)

HSB

hsb(98, 11%, 93%)

CMYK

cmyk(7%, 0%, 11%, 7%)

Oklch

oklch(93.0% 0.037 134.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDD7B3

BCB2D7

Analogous

D7CFB2

CDD7B3

BAD7B2

Triadic

CDD7B3

B2CCD7

D7B2CC

Split-Comp.

CDD7B3

B2BAD7

CFB2D7

Tetradic

CDD7B3

B2D7CF

BCB2D7

D7B2BA

Contrast Matrix WCAG 2.1 Contrast

CDD7B3	ABC2A1	9EEE72	BFF4AC	DEEED5
—	1.3 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.3 Fail	—	1.4 Fail	1.5 Fail	1.6 Fail
1.1 Fail	1.4 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.5 Fail	1.1 Fail	—	1.0 Fail
1.2 Fail	1.6 Fail	1.2 Fail	1.0 Fail	—

White BG

1.5Fail

1.9Fail

1.4Fail

1.3Fail

1.2Fail

Black BG

14.0AAA

11.0AAA

14.9AAA

16.8AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1BC

B5B5A9

C1C190

D6D6BD

E5E5DB

Deuteranopia

D1D0BE

B4B2AB

BCB697

D3CFC2

E4E3DD

Tritanopia

CEC3C4

ACAFB1

A2A8AD

C2CBCE

DFE0E1

Achromatopsia

D0D0D0

B7B7B7

C8C8C8

DCDCDC

E6E6E6

Shades & Tints Shades & Tints

#CDD7B3

Dark

Light

#ABC2A1

Dark

Light

#9EEE72

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdd7b3;
  --color-2: #abc2a1;
  --color-3: #9eee72;
  --color-4: #bff4ac;
  --color-5: #deeed5;
}

SCSS

$color-1: #cdd7b3;
$color-2: #abc2a1;
$color-3: #9eee72;
$color-4: #bff4ac;
$color-5: #deeed5;

TAILWIND

colors: {
  'brand-1': '#cdd7b3',
  'brand-2': '#abc2a1',
  'brand-3': '#9eee72',
  'brand-4': '#bff4ac',
  'brand-5': '#deeed5',
}

RGB Array

[205, 215, 179], [171, 194, 161], [158, 238, 114], [191, 244, 172], [222, 238, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CDD7B3, #ABC2A1, #9EEE72, #BFF4AC, #DEEED5 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: #cdd7b3; --color-2: #abc2a1; --color-3: #9eee72; --color-4: #bff4ac; --color-5: #deeed5. 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 nature-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