#9AA89F + #9DCDC9 + #ADD1AD + #CDE1B6 + #DAEFC8 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#9AA89F

Ash · DarkGray · Silver Sand

HEX

#9AA89F

RGB

rgb(154, 168, 159)

HSL

hsl(141, 7%, 63%)

HSB

hsb(141, 8%, 66%)

CMYK

cmyk(8%, 0%, 5%, 34%)

Oklch

oklch(71.8% 0.020 157.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#9DCDC9

Jade · LightSteelBlue · Lake Green

HEX

#9DCDC9

RGB

rgb(157, 205, 201)

HSL

hsl(175, 32%, 71%)

HSB

hsb(175, 23%, 80%)

CMYK

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

Oklch

oklch(81.3% 0.050 189.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#ADD1AD

Celadon · Silver · Apple Green

HEX

#ADD1AD

RGB

rgb(173, 209, 173)

HSL

hsl(120, 28%, 75%)

HSB

hsb(120, 17%, 82%)

CMYK

cmyk(17%, 0%, 17%, 18%)

Oklch

oklch(82.5% 0.063 145.0)

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

#CDE1B6

Willow Green · LightGray · Apple Green

HEX

#CDE1B6

RGB

rgb(205, 225, 182)

HSL

hsl(88, 42%, 80%)

HSB

hsb(88, 19%, 88%)

CMYK

cmyk(9%, 0%, 19%, 12%)

Oklch

oklch(88.4% 0.061 127.9)

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

#DAEFC8

Emerald · LightGray · Mint Green

HEX

#DAEFC8

RGB

rgb(218, 239, 200)

HSL

hsl(92, 55%, 86%)

HSB

hsb(92, 16%, 94%)

CMYK

cmyk(9%, 0%, 16%, 6%)

Oklch

oklch(92.6% 0.056 130.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AA89F

A79AA3

Analogous

9CA79A

9AA89F

9AA7A5

Triadic

9AA89F

9F9AA7

A79F9A

Split-Comp.

9AA89F

A59AA7

A79A9C

Tetradic

9AA89F

9A9CA7

A79AA3

A7A59A

Contrast Matrix WCAG 2.1 Contrast

9AA89F	9DCDC9	ADD1AD	CDE1B6	DAEFC8
—	1.4 Fail	1.5 Fail	1.8 Fail	2.0 Fail
1.4 Fail	—	1.0 Fail	1.3 Fail	1.4 Fail
1.5 Fail	1.0 Fail	—	1.2 Fail	1.4 Fail
1.8 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.4 Fail	1.4 Fail	1.1 Fail	—

White BG

2.5Fail

1.7Fail

1.4Fail

1.2Fail

Black BG

8.5AAA

12.0AAA

12.5AAA

15.0AAA

17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A0A1

B2B2CA

BDBDB6

D6D6C0

E3E3D1

Deuteranopia

9F9EA2

AFABCA

BBB8B8

D5D3C3

E2E0D4

Tritanopia

9BA3A3

9FCBCB

AFBDBE

CEC9CA

DBD9DB

Achromatopsia

A3A3A3

BEBEBE

C2C2C2

D6D6D6

E4E4E4

Shades & Tints Shades & Tints

#9AA89F

Dark

Light

#9DCDC9

Dark

Light

#ADD1AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9aa89f;
  --color-2: #9dcdc9;
  --color-3: #add1ad;
  --color-4: #cde1b6;
  --color-5: #daefc8;
}

SCSS

$color-1: #9aa89f;
$color-2: #9dcdc9;
$color-3: #add1ad;
$color-4: #cde1b6;
$color-5: #daefc8;

TAILWIND

colors: {
  'brand-1': '#9aa89f',
  'brand-2': '#9dcdc9',
  'brand-3': '#add1ad',
  'brand-4': '#cde1b6',
  'brand-5': '#daefc8',
}

RGB Array

[154, 168, 159], [157, 205, 201], [173, 209, 173], [205, 225, 182], [218, 239, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #9AA89F, #9DCDC9, #ADD1AD, #CDE1B6, #DAEFC8 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: #9aa89f; --color-2: #9dcdc9; --color-3: #add1ad; --color-4: #cde1b6; --color-5: #daefc8. 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 pastel-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