#B7C6B3 + #8D9183 + #EEB59A + #F4E7C4 + #DCD0AA · 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

#B7C6B3

Celadon · Silver · Apple Green

HEX

#B7C6B3

RGB

rgb(183, 198, 179)

HSL

hsl(107, 14%, 74%)

HSB

hsb(107, 10%, 78%)

CMYK

cmyk(8%, 0%, 10%, 22%)

Oklch

oklch(81.0% 0.031 139.1)

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

#8D9183

Ash · Gray · Warm Gray

HEX

#8D9183

RGB

rgb(141, 145, 131)

HSL

hsl(77, 6%, 54%)

HSB

hsb(77, 10%, 57%)

CMYK

cmyk(3%, 0%, 10%, 43%)

Oklch

oklch(64.9% 0.021 120.0)

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

#EEB59A

Apricot · BurlyWood · Peach Orange

HEX

#EEB59A

RGB

rgb(238, 181, 154)

HSL

hsl(19, 71%, 77%)

HSB

hsb(19, 35%, 93%)

CMYK

cmyk(0%, 24%, 35%, 7%)

Oklch

oklch(81.9% 0.076 46.5)

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

#F4E7C4

Goose Yellow · Bisque · Lemon Cream

HEX

#F4E7C4

RGB

rgb(244, 231, 196)

HSL

hsl(44, 69%, 86%)

HSB

hsb(44, 20%, 96%)

CMYK

cmyk(0%, 5%, 20%, 4%)

Oklch

oklch(92.9% 0.048 90.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DCD0AA

Goose Yellow · Wheat · Lemon Cream

HEX

#DCD0AA

RGB

rgb(220, 208, 170)

HSL

hsl(46, 42%, 76%)

HSB

hsb(46, 23%, 86%)

CMYK

cmyk(0%, 5%, 23%, 14%)

Oklch

oklch(85.8% 0.052 92.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7C6B3

C2B3C6

Analogous

C1C6B3

B7C6B3

B3C6B9

Triadic

B7C6B3

B3B7C6

C6B3B7

Split-Comp.

B7C6B3

B9B3C6

C6B3C1

Tetradic

B7C6B3

B3C1C6

C2B3C6

C6B9B3

Contrast Matrix WCAG 2.1 Contrast

B7C6B3	8D9183	EEB59A	F4E7C4	DCD0AA
—	1.8 Fail	1.0 Fail	1.5 Fail	1.2 Fail
1.8 Fail	—	1.8 Fail	2.6 Fail	2.1 Fail
1.0 Fail	1.8 Fail	—	1.5 Fail	1.2 Fail
1.5 Fail	2.6 Fail	1.5 Fail	—	1.3 Fail
1.2 Fail	2.1 Fail	1.2 Fail	1.3 Fail	—

White BG

1.8Fail

3.2AA Large

1.8Fail

1.2Fail

1.5Fail

Black BG

11.7AAA

6.5AA

11.7AAA

17.1AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBEB8

8F8F86

D5D5A1

EEEECC

D7D7B3

Deuteranopia

BDBCB9

8F8E87

D9DDA2

EFF0CF

D8D8B5

Tritanopia

B8BBBC

8D898A

EBA6A7

F3D3D5

DBBABC

Achromatopsia

BFBFBF

8E8E8E

C3C3C3

E7E7E7

CFCFCF

Shades & Tints Shades & Tints

#B7C6B3

Dark

Light

#8D9183

Dark

Light

#EEB59A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7c6b3;
  --color-2: #8d9183;
  --color-3: #eeb59a;
  --color-4: #f4e7c4;
  --color-5: #dcd0aa;
}

SCSS

$color-1: #b7c6b3;
$color-2: #8d9183;
$color-3: #eeb59a;
$color-4: #f4e7c4;
$color-5: #dcd0aa;

TAILWIND

colors: {
  'brand-1': '#b7c6b3',
  'brand-2': '#8d9183',
  'brand-3': '#eeb59a',
  'brand-4': '#f4e7c4',
  'brand-5': '#dcd0aa',
}

RGB Array

[183, 198, 179], [141, 145, 131], [238, 181, 154], [244, 231, 196], [220, 208, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #B7C6B3, #8D9183, #EEB59A, #F4E7C4, #DCD0AA 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: #b7c6b3; --color-2: #8d9183; --color-3: #eeb59a; --color-4: #f4e7c4; --color-5: #dcd0aa. 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