#847E88 + #B5A196 + #FDE8C9 + #EFD1AB + #EDCCA3 · 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

#847E88

Ash · Gray · Warm Gray

HEX

#847E88

RGB

rgb(132, 126, 136)

HSL

hsl(276, 4%, 51%)

HSB

hsb(276, 7%, 53%)

CMYK

cmyk(3%, 7%, 0%, 47%)

Oklch

oklch(60.2% 0.016 312.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#B5A196

Apricot · DarkGray · Warm Sun

HEX

#B5A196

RGB

rgb(181, 161, 150)

HSL

hsl(21, 17%, 65%)

HSB

hsb(21, 17%, 71%)

CMYK

cmyk(0%, 11%, 17%, 29%)

Oklch

oklch(72.3% 0.028 50.7)

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

#FDE8C9

Goose Yellow · Bisque · Peach Orange

HEX

#FDE8C9

RGB

rgb(253, 232, 201)

HSL

hsl(36, 93%, 89%)

HSB

hsb(36, 21%, 99%)

CMYK

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

Oklch

oklch(94.0% 0.047 77.6)

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

#EFD1AB

Goose Yellow · Wheat · Peach Orange

HEX

#EFD1AB

RGB

rgb(239, 209, 171)

HSL

hsl(34, 68%, 80%)

HSB

hsb(34, 28%, 94%)

CMYK

cmyk(0%, 13%, 28%, 6%)

Oklch

oklch(87.6% 0.060 73.4)

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

#EDCCA3

Goose Yellow · Wheat · Peach Orange

HEX

#EDCCA3

RGB

rgb(237, 204, 163)

HSL

hsl(33, 67%, 78%)

HSB

hsb(33, 31%, 93%)

CMYK

cmyk(0%, 14%, 31%, 7%)

Oklch

oklch(86.3% 0.066 72.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

847E88

81877D

Analogous

7E7D87

847E88

877D86

Triadic

847E88

87837D

7D8783

Split-Comp.

847E88

86877D

7D877E

Tetradic

847E88

877E7D

81877D

7D8687

Contrast Matrix WCAG 2.1 Contrast

847E88	B5A196	FDE8C9	EFD1AB	EDCCA3
—	1.6 Fail	3.3 AA Large	2.7 Fail	2.6 Fail
1.6 Fail	—	2.1 Fail	1.7 Fail	1.6 Fail
3.3 AA Large	2.1 Fail	—	1.2 Fail	1.3 Fail
2.7 Fail	1.7 Fail	1.2 Fail	—	1.0 Fail
2.6 Fail	1.6 Fail	1.3 Fail	1.0 Fail	—

White BG

3.9AA Large

2.5Fail

1.2Fail

1.5Fail

Black BG

5.3AA

8.5AAA

17.6AAA

14.4AAA

13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

818186

ACAC99

F4F4D1

E2E2B4

DFDEAD

Deuteranopia

828285

AEAF99

F5F7D2

E4E6B6

E1E3AF

Tritanopia

848483

B49B9B

FCD6D8

EDBBBD

EBB5B6

Achromatopsia

818181

A6A6A6

EBEBEB

D6D6D6

D1D1D1

Shades & Tints Shades & Tints

#847E88

Dark

Light

#B5A196

Dark

Light

#FDE8C9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #847e88;
  --color-2: #b5a196;
  --color-3: #fde8c9;
  --color-4: #efd1ab;
  --color-5: #edcca3;
}

SCSS

$color-1: #847e88;
$color-2: #b5a196;
$color-3: #fde8c9;
$color-4: #efd1ab;
$color-5: #edcca3;

TAILWIND

colors: {
  'brand-1': '#847e88',
  'brand-2': '#b5a196',
  'brand-3': '#fde8c9',
  'brand-4': '#efd1ab',
  'brand-5': '#edcca3',
}

RGB Array

[132, 126, 136], [181, 161, 150], [253, 232, 201], [239, 209, 171], [237, 204, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #847E88, #B5A196, #FDE8C9, #EFD1AB, #EDCCA3 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: #847e88; --color-2: #b5a196; --color-3: #fde8c9; --color-4: #efd1ab; --color-5: #edcca3. 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