#9A8F83 + #CECEC6 + #E0EBDD + #FDAFBC + #F4D6D2 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#9A8F83

Ginger · Gray · Warm Sun

HEX

#9A8F83

RGB

rgb(154, 143, 131)

HSL

hsl(31, 10%, 56%)

HSB

hsb(31, 15%, 60%)

CMYK

cmyk(0%, 7%, 15%, 40%)

Oklch

oklch(65.6% 0.022 69.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CECEC6

Fresh Green · LightGray · Pearl Gray

HEX

#CECEC6

RGB

rgb(206, 206, 198)

HSL

hsl(60, 8%, 79%)

HSB

hsb(60, 4%, 81%)

CMYK

cmyk(0%, 0%, 4%, 19%)

Oklch

oklch(84.9% 0.011 106.6)

Traditional「Fresh Green」· Paint「Pearl Gray」· Creative Silver Lining

#E0EBDD

Celadon · Beige · Mint Green

HEX

#E0EBDD

RGB

rgb(224, 235, 221)

HSL

hsl(107, 26%, 89%)

HSB

hsb(107, 6%, 92%)

CMYK

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

Oklch

oklch(92.8% 0.022 139.0)

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

#FDAFBC

Peach Pink · LightPink · Cherry Blossom

HEX

#FDAFBC

RGB

rgb(253, 175, 188)

HSL

hsl(350, 95%, 84%)

HSB

hsb(350, 31%, 99%)

CMYK

cmyk(0%, 31%, 26%, 1%)

Oklch

oklch(83.2% 0.093 8.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F4D6D2

Peach Pink · Bisque · Cherry Blossom

HEX

#F4D6D2

RGB

rgb(244, 214, 210)

HSL

hsl(7, 61%, 89%)

HSB

hsb(7, 14%, 96%)

CMYK

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

Oklch

oklch(90.0% 0.034 26.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9A8F83

848E9A

Analogous

9A8484

9A8F83

9A9A84

Triadic

9A8F83

849A8F

8F849A

Split-Comp.

9A8F83

849A9A

84849A

Tetradic

9A8F83

849A84

848E9A

9A849A

Contrast Matrix WCAG 2.1 Contrast

9A8F83	CECEC6	E0EBDD	FDAFBC	F4D6D2
—	2.0 Fail	2.6 Fail	1.8 Fail	2.3 Fail
2.0 Fail	—	1.3 Fail	1.1 Fail	1.2 Fail
2.6 Fail	1.3 Fail	—	1.4 Fail	1.1 Fail
1.8 Fail	1.1 Fail	1.4 Fail	—	1.3 Fail
2.3 Fail	1.2 Fail	1.1 Fail	1.3 Fail	—

White BG

3.2AA Large

1.6Fail

1.2Fail

1.7Fail

1.4Fail

Black BG

6.6AA

13.3AAA

17.1AAA

12.0AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959586

CECEC8

E5E5E0

DBDBB9

E7E7D3

Deuteranopia

969787

CECEC8

E4E3E1

E0E6B8

E9EBD3

Tritanopia

998889

CEC9CA

E1E3E4

F9B6B6

F2D4D4

Achromatopsia

919191

CDCDCD

E6E6E6

C8C8C8

DFDFDF

Shades & Tints Shades & Tints

#9A8F83

Dark

Light

#CECEC6

Dark

Light

#E0EBDD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9a8f83;
  --color-2: #cecec6;
  --color-3: #e0ebdd;
  --color-4: #fdafbc;
  --color-5: #f4d6d2;
}

SCSS

$color-1: #9a8f83;
$color-2: #cecec6;
$color-3: #e0ebdd;
$color-4: #fdafbc;
$color-5: #f4d6d2;

TAILWIND

colors: {
  'brand-1': '#9a8f83',
  'brand-2': '#cecec6',
  'brand-3': '#e0ebdd',
  'brand-4': '#fdafbc',
  'brand-5': '#f4d6d2',
}

RGB Array

[154, 143, 131], [206, 206, 198], [224, 235, 221], [253, 175, 188], [244, 214, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #9A8F83, #CECEC6, #E0EBDD, #FDAFBC, #F4D6D2 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: #9a8f83; --color-2: #cecec6; --color-3: #e0ebdd; --color-4: #fdafbc; --color-5: #f4d6d2. 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