#9DDCB5 + #C3E3B3 + #E9E9B0 + #CEBF34 + #B9A51C · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#9DDCB5

Celadon · LightGreen · Apple Green

HEX

#9DDCB5

RGB

rgb(157, 220, 181)

HSL

hsl(143, 47%, 74%)

HSB

hsb(143, 29%, 86%)

CMYK

cmyk(29%, 0%, 18%, 14%)

Oklch

oklch(84.1% 0.084 156.9)

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

#C3E3B3

Celadon · Silver · Apple Green

HEX

#C3E3B3

RGB

rgb(195, 227, 179)

HSL

hsl(100, 46%, 80%)

HSB

hsb(100, 21%, 89%)

CMYK

cmyk(14%, 0%, 21%, 11%)

Oklch

oklch(88.0% 0.073 135.3)

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

#E9E9B0

Fresh Green · Wheat · Lemon Cream

HEX

#E9E9B0

RGB

rgb(233, 233, 176)

HSL

hsl(60, 56%, 80%)

HSB

hsb(60, 24%, 91%)

CMYK

cmyk(0%, 0%, 24%, 9%)

Oklch

oklch(92.0% 0.074 107.8)

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

#CEBF34

Autumn Sage · GoldenRod · Sunflower

HEX

#CEBF34

RGB

rgb(206, 191, 52)

HSL

hsl(54, 61%, 51%)

HSB

hsb(54, 75%, 81%)

CMYK

cmyk(0%, 7%, 75%, 19%)

Oklch

oklch(79.4% 0.151 103.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#B9A51C

Autumn Sage · GoldenRod · Honey Gold

HEX

#B9A51C

RGB

rgb(185, 165, 28)

HSL

hsl(52, 74%, 42%)

HSB

hsb(52, 85%, 73%)

CMYK

cmyk(0%, 11%, 85%, 27%)

Oklch

oklch(71.8% 0.143 100.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DDCB5

DC9EC4

Analogous

A5DC9E

9DDCB5

9EDCD5

Triadic

9DDCB5

B59EDC

DCB59E

Split-Comp.

9DDCB5

D59EDC

DC9EA5

Tetradic

9DDCB5

9EA5DC

DC9EC4

DCD59E

Contrast Matrix WCAG 2.1 Contrast

9DDCB5	C3E3B3	E9E9B0	CEBF34	B9A51C
—	1.1 Fail	1.3 Fail	1.2 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.8 Fail
1.3 Fail	1.1 Fail	—	1.5 Fail	2.0 Fail
1.2 Fail	1.3 Fail	1.5 Fail	—	1.3 Fail
1.6 Fail	1.8 Fail	2.0 Fail	1.3 Fail	—

White BG

1.6Fail

1.4Fail

1.3Fail

1.9Fail

2.5Fail

Black BG

13.3AAA

15.0AAA

16.7AAA

11.1AAA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B9BE

D1D1BF

E9E9BE

C8C756

B0B03D

Deuteranopia

B5B0C1

CFCDC1

E9E9C1

C8CA5E

B2B345

Tritanopia

A0C6C8

C5C8CA

E9C9CB

CD7076

B8575D

Achromatopsia

C5C5C5

D4D4D4

E3E3E3

B4B4B4

9B9B9B

Shades & Tints Shades & Tints

#9DDCB5

Dark

Light

#C3E3B3

Dark

Light

#E9E9B0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ddcb5;
  --color-2: #c3e3b3;
  --color-3: #e9e9b0;
  --color-4: #cebf34;
  --color-5: #b9a51c;
}

SCSS

$color-1: #9ddcb5;
$color-2: #c3e3b3;
$color-3: #e9e9b0;
$color-4: #cebf34;
$color-5: #b9a51c;

TAILWIND

colors: {
  'brand-1': '#9ddcb5',
  'brand-2': '#c3e3b3',
  'brand-3': '#e9e9b0',
  'brand-4': '#cebf34',
  'brand-5': '#b9a51c',
}

RGB Array

[157, 220, 181], [195, 227, 179], [233, 233, 176], [206, 191, 52], [185, 165, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #9DDCB5, #C3E3B3, #E9E9B0, #CEBF34, #B9A51C 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: #9ddcb5; --color-2: #c3e3b3; --color-3: #e9e9b0; --color-4: #cebf34; --color-5: #b9a51c. 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