#9EC5AA + #B7D1A7 + #CADEB1 + #DDEBBC + #F7F6C6 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9EC5AA

Celadon · DarkGray · Apple Green

HEX

#9EC5AA

RGB

rgb(158, 197, 170)

HSL

hsl(138, 25%, 70%)

HSB

hsb(138, 20%, 77%)

CMYK

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

Oklch

oklch(78.8% 0.056 154.7)

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

#B7D1A7

Celadon · Silver · Apple Green

HEX

#B7D1A7

RGB

rgb(183, 209, 167)

HSL

hsl(97, 31%, 74%)

HSB

hsb(97, 20%, 82%)

CMYK

cmyk(12%, 0%, 20%, 18%)

Oklch

oklch(83.0% 0.064 133.6)

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

#CADEB1

Willow Green · Silver · Apple Green

HEX

#CADEB1

RGB

rgb(202, 222, 177)

HSL

hsl(87, 41%, 78%)

HSB

hsb(87, 20%, 87%)

CMYK

cmyk(9%, 0%, 20%, 13%)

Oklch

oklch(87.4% 0.064 127.2)

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

#DDEBBC

Willow Green · Wheat · Mint Green

HEX

#DDEBBC

RGB

rgb(221, 235, 188)

HSL

hsl(78, 54%, 83%)

HSB

hsb(78, 20%, 92%)

CMYK

cmyk(6%, 0%, 20%, 8%)

Oklch

oklch(91.8% 0.064 121.1)

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

#F7F6C6

Fresh Green · Bisque · Lemon Cream

HEX

#F7F6C6

RGB

rgb(247, 246, 198)

HSL

hsl(59, 75%, 87%)

HSB

hsb(59, 20%, 97%)

CMYK

cmyk(0%, 0%, 20%, 3%)

Oklch

oklch(96.2% 0.062 106.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9EC5AA

C69FBA

Analogous

A7C69F

9EC5AA

9FC6BE

Triadic

9EC5AA

AB9FC6

C6AB9F

Split-Comp.

9EC5AA

BE9FC6

C69FA7

Tetradic

9EC5AA

9FA7C6

C69FBA

C6BE9F

Contrast Matrix WCAG 2.1 Contrast

9EC5AA	B7D1A7	CADEB1	DDEBBC	F7F6C6
—	1.2 Fail	1.3 Fail	1.5 Fail	1.7 Fail
1.2 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.7 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.9Fail

1.7Fail

1.4Fail

1.3Fail

1.1Fail

Black BG

11.0AAA

12.7AAA

14.6AAA

16.7AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAFB1

C2C2B1

D3D3BC

E3E3C7

F7F7D2

Deuteranopia

ADAAB2

C1BFB4

D2D0BF

E2E1CA

F7F7D4

Tritanopia

A0B6B7

B8B9BB

CBC4C6

DED0D2

F7DBDD

Achromatopsia

B6B6B6

C4C4C4

D3D3D3

E1E1E1

F1F1F1

Shades & Tints Shades & Tints

#9EC5AA

Dark

Light

#B7D1A7

Dark

Light

#CADEB1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ec5aa;
  --color-2: #b7d1a7;
  --color-3: #cadeb1;
  --color-4: #ddebbc;
  --color-5: #f7f6c6;
}

SCSS

$color-1: #9ec5aa;
$color-2: #b7d1a7;
$color-3: #cadeb1;
$color-4: #ddebbc;
$color-5: #f7f6c6;

TAILWIND

colors: {
  'brand-1': '#9ec5aa',
  'brand-2': '#b7d1a7',
  'brand-3': '#cadeb1',
  'brand-4': '#ddebbc',
  'brand-5': '#f7f6c6',
}

RGB Array

[158, 197, 170], [183, 209, 167], [202, 222, 177], [221, 235, 188], [247, 246, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #9EC5AA, #B7D1A7, #CADEB1, #DDEBBC, #F7F6C6 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: #9ec5aa; --color-2: #b7d1a7; --color-3: #cadeb1; --color-4: #ddebbc; --color-5: #f7f6c6. 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 warm-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