#F4E0AD + #B6B8B7 + #B5A375 + #7C8389 + #E7E3C6 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#F4E0AD

Goose Yellow · Wheat · Lemon Cream

HEX

#F4E0AD

RGB

rgb(244, 224, 173)

HSL

hsl(43, 76%, 82%)

HSB

hsb(43, 29%, 96%)

CMYK

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

Oklch

oklch(91.1% 0.069 89.1)

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

#B6B8B7

Silver Gray · Silver · Pearl Gray

HEX

#B6B8B7

RGB

rgb(182, 184, 183)

HSL

hsl(150, 1%, 72%)

HSB

hsb(150, 1%, 72%)

CMYK

cmyk(1%, 0%, 1%, 28%)

Oklch

oklch(78.1% 0.003 165.1)

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

#B5A375

Ginger · Tan · Sunflower

HEX

#B5A375

RGB

rgb(181, 163, 117)

HSL

hsl(43, 30%, 58%)

HSB

hsb(43, 35%, 71%)

CMYK

cmyk(0%, 10%, 35%, 29%)

Oklch

oklch(72.0% 0.066 89.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#7C8389

Ash · Gray · Warm Gray

HEX

#7C8389

RGB

rgb(124, 131, 137)

HSL

hsl(208, 5%, 51%)

HSB

hsb(208, 9%, 54%)

CMYK

cmyk(9%, 4%, 0%, 46%)

Oklch

oklch(60.6% 0.012 243.8)

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

#E7E3C6

Fresh Green · Bisque · Lemon Cream

HEX

#E7E3C6

RGB

rgb(231, 227, 198)

HSL

hsl(53, 41%, 84%)

HSB

hsb(53, 14%, 91%)

CMYK

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

Oklch

oklch(91.1% 0.039 100.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4E0AD

AEC2F4

Analogous

F4BDAE

F4E0AD

E5F4AE

Triadic

F4E0AD

AEF4E0

E0AEF4

Split-Comp.

F4E0AD

AEE5F4

BDAEF4

Tetradic

F4E0AD

AEF4BD

AEC2F4

F4AEE5

Contrast Matrix WCAG 2.1 Contrast

F4E0AD	B6B8B7	B5A375	7C8389	E7E3C6
—	1.5 Fail	1.9 Fail	2.9 Fail	1.0 Fail
1.5 Fail	—	1.2 Fail	1.9 Fail	1.5 Fail
1.9 Fail	1.2 Fail	—	1.5 Fail	1.9 Fail
2.9 Fail	1.9 Fail	1.5 Fail	—	3.0 Fail
1.0 Fail	1.5 Fail	1.9 Fail	3.0 Fail	—

White BG

1.3Fail

2.0Fail

2.5Fail

3.8AA Large

1.3Fail

Black BG

16.1AAA

10.5AAA

8.5AAA

5.5AA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBB9

B7B7B7

ADAD80

7F7F88

E5E5CD

Deuteranopia

EDEEBC

B7B7B7

AEB083

7F7E87

E6E6CF

Tritanopia

F3C3C5

B6B7B7

B4898B

7C8686

E7D3D4

Achromatopsia

E0E0E0

B7B7B7

A3A3A3

828282

E1E1E1

Shades & Tints Shades & Tints

#F4E0AD

Dark

Light

#B6B8B7

Dark

Light

#B5A375

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4e0ad;
  --color-2: #b6b8b7;
  --color-3: #b5a375;
  --color-4: #7c8389;
  --color-5: #e7e3c6;
}

SCSS

$color-1: #f4e0ad;
$color-2: #b6b8b7;
$color-3: #b5a375;
$color-4: #7c8389;
$color-5: #e7e3c6;

TAILWIND

colors: {
  'brand-1': '#f4e0ad',
  'brand-2': '#b6b8b7',
  'brand-3': '#b5a375',
  'brand-4': '#7c8389',
  'brand-5': '#e7e3c6',
}

RGB Array

[244, 224, 173], [182, 184, 183], [181, 163, 117], [124, 131, 137], [231, 227, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F4E0AD, #B6B8B7, #B5A375, #7C8389, #E7E3C6 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: #f4e0ad; --color-2: #b6b8b7; --color-3: #b5a375; --color-4: #7c8389; --color-5: #e7e3c6. 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