#9DB5A7 + #CAE5C4 + #DDCCB0 + #E6B771 + #D28F64 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9DB5A7

Celadon · DarkGray · Apple Green

HEX

#9DB5A7

RGB

rgb(157, 181, 167)

HSL

hsl(145, 14%, 66%)

HSB

hsb(145, 13%, 71%)

CMYK

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

Oklch

oklch(75.1% 0.033 159.9)

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

#CAE5C4

Celadon · LightGray · Mint Green

HEX

#CAE5C4

RGB

rgb(202, 229, 196)

HSL

hsl(109, 39%, 83%)

HSB

hsb(109, 14%, 90%)

CMYK

cmyk(12%, 0%, 14%, 10%)

Oklch

oklch(89.3% 0.053 140.0)

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

#DDCCB0

Goose Yellow · Wheat · Peach Orange

HEX

#DDCCB0

RGB

rgb(221, 204, 176)

HSL

hsl(37, 40%, 78%)

HSB

hsb(37, 20%, 87%)

CMYK

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

Oklch

oklch(85.2% 0.042 80.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E6B771

Ginger · BurlyWood · Warm Sun

HEX

#E6B771

RGB

rgb(230, 183, 113)

HSL

hsl(36, 70%, 67%)

HSB

hsb(36, 51%, 90%)

CMYK

cmyk(0%, 20%, 51%, 10%)

Oklch

oklch(80.7% 0.103 76.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D28F64

Apricot · DarkSalmon · Warm Sun

HEX

#D28F64

RGB

rgb(210, 143, 100)

HSL

hsl(23, 55%, 61%)

HSB

hsb(23, 52%, 82%)

CMYK

cmyk(0%, 32%, 52%, 18%)

Oklch

oklch(70.8% 0.100 53.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DB5A7

B49CAA

Analogous

9EB49C

9DB5A7

9CB4B2

Triadic

9DB5A7

A69CB4

B4A69C

Split-Comp.

9DB5A7

B29CB4

B49C9E

Tetradic

9DB5A7

9C9EB4

B49CAA

B4B29C

Contrast Matrix WCAG 2.1 Contrast

9DB5A7	CAE5C4	DDCCB0	E6B771	D28F64
—	1.6 Fail	1.4 Fail	1.2 Fail	1.2 Fail
1.6 Fail	—	1.2 Fail	1.4 Fail	2.0 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.7 Fail
1.2 Fail	1.4 Fail	1.2 Fail	—	1.4 Fail
1.2 Fail	2.0 Fail	1.7 Fail	1.4 Fail	—

White BG

2.2Fail

1.4Fail

1.6Fail

1.8Fail

2.7Fail

Black BG

9.6AAA

15.5AAA

13.3AAA

11.4AAA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A8AA

D6D6CC

D6D5B7

D2D182

B5B46E

Deuteranopia

A6A4AB

D4D2CE

D7D8B8

D4D886

B9BE71

Tritanopia

9EADAE

CBD2D4

DCBCBD

E48F92

CF7778

Achromatopsia

ACACAC

D9D9D9

CECECE

BDBDBD

9E9E9E

Shades & Tints Shades & Tints

#9DB5A7

Dark

Light

#CAE5C4

Dark

Light

#DDCCB0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9db5a7;
  --color-2: #cae5c4;
  --color-3: #ddccb0;
  --color-4: #e6b771;
  --color-5: #d28f64;
}

SCSS

$color-1: #9db5a7;
$color-2: #cae5c4;
$color-3: #ddccb0;
$color-4: #e6b771;
$color-5: #d28f64;

TAILWIND

colors: {
  'brand-1': '#9db5a7',
  'brand-2': '#cae5c4',
  'brand-3': '#ddccb0',
  'brand-4': '#e6b771',
  'brand-5': '#d28f64',
}

RGB Array

[157, 181, 167], [202, 229, 196], [221, 204, 176], [230, 183, 113], [210, 143, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DB5A7, #CAE5C4, #DDCCB0, #E6B771, #D28F64 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: #9db5a7; --color-2: #cae5c4; --color-3: #ddccb0; --color-4: #e6b771; --color-5: #d28f64. 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