#9DA88C + #DAB9A8 + #C9DAAD + #BF8380 + #D2BA7C · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9DA88C

Grass Green · DarkSeaGreen · Olive Green

HEX

#9DA88C

RGB

rgb(157, 168, 140)

HSL

hsl(84, 14%, 60%)

HSB

hsb(84, 17%, 66%)

CMYK

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

Oklch

oklch(71.5% 0.041 124.9)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#DAB9A8

Apricot · Tan · Peach Orange

HEX

#DAB9A8

RGB

rgb(218, 185, 168)

HSL

hsl(20, 40%, 76%)

HSB

hsb(20, 23%, 85%)

CMYK

cmyk(0%, 15%, 23%, 15%)

Oklch

oklch(81.0% 0.045 48.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#C9DAAD

Willow Green · Silver · Apple Green

HEX

#C9DAAD

RGB

rgb(201, 218, 173)

HSL

hsl(83, 38%, 77%)

HSB

hsb(83, 21%, 85%)

CMYK

cmyk(8%, 0%, 21%, 15%)

Oklch

oklch(86.4% 0.063 124.5)

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

#BF8380

Peach Pink · DarkSalmon · Coral Red

HEX

#BF8380

RGB

rgb(191, 131, 128)

HSL

hsl(3, 33%, 63%)

HSB

hsb(3, 33%, 75%)

CMYK

cmyk(0%, 31%, 33%, 25%)

Oklch

oklch(67.0% 0.075 22.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D2BA7C

Ginger · BurlyWood · Sunflower

HEX

#D2BA7C

RGB

rgb(210, 186, 124)

HSL

hsl(43, 49%, 65%)

HSB

hsb(43, 41%, 82%)

CMYK

cmyk(0%, 11%, 41%, 18%)

Oklch

oklch(79.5% 0.085 89.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DA88C

968BA7

Analogous

A7A48B

9DA88C

8EA78B

Triadic

9DA88C

8B9CA7

A78B9C

Split-Comp.

9DA88C

8B8EA7

A48BA7

Tetradic

9DA88C

8BA7A4

968BA7

A78B8E

Contrast Matrix WCAG 2.1 Contrast

9DA88C	DAB9A8	C9DAAD	BF8380	D2BA7C
—	1.4 Fail	1.7 Fail	1.2 Fail	1.3 Fail
1.4 Fail	—	1.2 Fail	1.7 Fail	1.0 Fail
1.7 Fail	1.2 Fail	—	2.1 Fail	1.3 Fail
1.2 Fail	1.7 Fail	2.1 Fail	—	1.6 Fail
1.3 Fail	1.0 Fail	1.3 Fail	1.6 Fail	—

White BG

2.5Fail

1.8Fail

1.5Fail

3.1AA Large

1.9Fail

Black BG

8.4AAA

11.5AAA

14.1AAA

6.8AA

11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A293

CCCBAC

D0D1B8

A5A481

C8C78B

Deuteranopia

A1A094

CED0AD

CFCEBB

A9AD81

C9CB8F

Tritanopia

9E9899

D8AFB0

CAC0C2

BC8181

D19799

Achromatopsia

A2A2A2

C1C1C1

D0D0D0

959595

BABABA

Shades & Tints Shades & Tints

#9DA88C

Dark

Light

#DAB9A8

Dark

Light

#C9DAAD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9da88c;
  --color-2: #dab9a8;
  --color-3: #c9daad;
  --color-4: #bf8380;
  --color-5: #d2ba7c;
}

SCSS

$color-1: #9da88c;
$color-2: #dab9a8;
$color-3: #c9daad;
$color-4: #bf8380;
$color-5: #d2ba7c;

TAILWIND

colors: {
  'brand-1': '#9da88c',
  'brand-2': '#dab9a8',
  'brand-3': '#c9daad',
  'brand-4': '#bf8380',
  'brand-5': '#d2ba7c',
}

RGB Array

[157, 168, 140], [218, 185, 168], [201, 218, 173], [191, 131, 128], [210, 186, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #9DA88C, #DAB9A8, #C9DAAD, #BF8380, #D2BA7C 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: #9da88c; --color-2: #dab9a8; --color-3: #c9daad; --color-4: #bf8380; --color-5: #d2ba7c. 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