#9899AE + #C9CCD5 + #D2E0E3 + #E8FDF4 + #F5FAE3 · 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

#9899AE

Azure · DarkGray · Cobalt Blue

HEX

#9899AE

RGB

rgb(152, 153, 174)

HSL

hsl(237, 12%, 64%)

HSB

hsb(237, 13%, 68%)

CMYK

cmyk(13%, 12%, 0%, 32%)

Oklch

oklch(68.9% 0.031 283.4)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#C9CCD5

Azure · LightGray · Sky Blue

HEX

#C9CCD5

RGB

rgb(201, 204, 213)

HSL

hsl(225, 13%, 81%)

HSB

hsb(225, 6%, 84%)

CMYK

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

Oklch

oklch(84.6% 0.013 271.3)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#D2E0E3

Sky Blue · LightGray · Glacier Blue

HEX

#D2E0E3

RGB

rgb(210, 224, 227)

HSL

hsl(191, 23%, 86%)

HSB

hsb(191, 7%, 89%)

CMYK

cmyk(7%, 1%, 0%, 11%)

Oklch

oklch(89.7% 0.016 212.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#E8FDF4

Jade · Lavender · Mint Green

HEX

#E8FDF4

RGB

rgb(232, 253, 244)

HSL

hsl(154, 84%, 95%)

HSB

hsb(154, 8%, 99%)

CMYK

cmyk(8%, 0%, 4%, 1%)

Oklch

oklch(97.6% 0.025 168.3)

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

#F5FAE3

Willow Green · Beige · Mint Green

HEX

#F5FAE3

RGB

rgb(245, 250, 227)

HSL

hsl(73, 70%, 94%)

HSB

hsb(73, 9%, 98%)

CMYK

cmyk(2%, 0%, 9%, 2%)

Oklch

oklch(97.5% 0.031 116.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9899AE

AEAD98

Analogous

98A4AE

9899AE

A298AE

Triadic

9899AE

AE9899

99AE98

Split-Comp.

9899AE

AEA298

A4AE98

Tetradic

9899AE

AE98A4

AEAD98

98AEA2

Contrast Matrix WCAG 2.1 Contrast

9899AE	C9CCD5	D2E0E3	E8FDF4	F5FAE3
—	1.7 Fail	2.1 Fail	2.6 Fail	2.6 Fail
1.7 Fail	—	1.2 Fail	1.5 Fail	1.5 Fail
2.1 Fail	1.2 Fail	—	1.3 Fail	1.3 Fail
2.6 Fail	1.5 Fail	1.3 Fail	—	1.0 Fail
2.6 Fail	1.5 Fail	1.3 Fail	1.0 Fail	—

White BG

2.8Fail

1.6Fail

1.4Fail

1.1Fail

Black BG

7.5AAA

13.1AAA

15.5AAA

19.8AAA

19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898A9

CACAD3

D8D8E2

F1F1F6

F7F7E9

Deuteranopia

9898A8

CACAD2

D7D6E2

F0EEF7

F7F7EA

Tritanopia

98A5A4

C9D1D1

D3E2E2

E9F8F8

F5EDEE

Achromatopsia

9B9B9B

CCCCCC

DCDCDC

F6F6F6

Shades & Tints Shades & Tints

#9899AE

Dark

Light

#C9CCD5

Dark

Light

#D2E0E3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9899ae;
  --color-2: #c9ccd5;
  --color-3: #d2e0e3;
  --color-4: #e8fdf4;
  --color-5: #f5fae3;
}

SCSS

$color-1: #9899ae;
$color-2: #c9ccd5;
$color-3: #d2e0e3;
$color-4: #e8fdf4;
$color-5: #f5fae3;

TAILWIND

colors: {
  'brand-1': '#9899ae',
  'brand-2': '#c9ccd5',
  'brand-3': '#d2e0e3',
  'brand-4': '#e8fdf4',
  'brand-5': '#f5fae3',
}

RGB Array

[152, 153, 174], [201, 204, 213], [210, 224, 227], [232, 253, 244], [245, 250, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #9899AE, #C9CCD5, #D2E0E3, #E8FDF4, #F5FAE3 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: #9899ae; --color-2: #c9ccd5; --color-3: #d2e0e3; --color-4: #e8fdf4; --color-5: #f5fae3. 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