#F5E8B5 + #F1C69E + #D4A68E + #B48A8F + #987D8F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5E8B5

Goose Yellow · Wheat · Lemon Cream

HEX

#F5E8B5

RGB

rgb(245, 232, 181)

HSL

hsl(48, 76%, 84%)

HSB

hsb(48, 26%, 96%)

CMYK

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

Oklch

oklch(92.9% 0.067 95.5)

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

#F1C69E

Apricot · Wheat · Peach Orange

HEX

#F1C69E

RGB

rgb(241, 198, 158)

HSL

hsl(29, 75%, 78%)

HSB

hsb(29, 34%, 95%)

CMYK

cmyk(0%, 18%, 34%, 5%)

Oklch

oklch(85.4% 0.072 64.6)

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

#D4A68E

Apricot · Tan · Warm Sun

HEX

#D4A68E

RGB

rgb(212, 166, 142)

HSL

hsl(21, 45%, 69%)

HSB

hsb(21, 33%, 83%)

CMYK

cmyk(0%, 22%, 33%, 17%)

Oklch

oklch(76.1% 0.064 48.9)

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

#B48A8F

Peach Pink · DarkGray · Coral Red

HEX

#B48A8F

RGB

rgb(180, 138, 143)

HSL

hsl(353, 22%, 62%)

HSB

hsb(353, 23%, 71%)

CMYK

cmyk(0%, 23%, 21%, 29%)

Oklch

oklch(67.5% 0.052 10.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#987D8F

Rose Purple · Gray · Rose Pink

HEX

#987D8F

RGB

rgb(152, 125, 143)

HSL

hsl(320, 12%, 54%)

HSB

hsb(320, 18%, 60%)

CMYK

cmyk(0%, 18%, 6%, 40%)

Oklch

oklch(62.1% 0.042 338.6)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5E8B5

B7C4F5

Analogous

F5CAB7

F5E8B5

E3F5B7

Triadic

F5E8B5

B7F5E9

E9B7F5

Split-Comp.

F5E8B5

B7E3F5

CAB7F5

Tetradic

F5E8B5

B7F5CA

B7C4F5

F5B7E3

Contrast Matrix WCAG 2.1 Contrast

F5E8B5	F1C69E	D4A68E	B48A8F	987D8F
—	1.3 Fail	1.8 Fail	2.5 Fail	3.0 AA Large
1.3 Fail	—	1.4 Fail	1.9 Fail	2.3 Fail
1.8 Fail	1.4 Fail	—	1.4 Fail	1.7 Fail
2.5 Fail	1.9 Fail	1.4 Fail	—	1.2 Fail
3.0 AA Large	2.3 Fail	1.7 Fail	1.2 Fail	—

White BG

1.2Fail

1.6Fail

2.2Fail

3.0AA Large

3.7AA Large

Black BG

17.1AAA

13.3AAA

9.6AAA

7.0AA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFC1

DEDEA8

C0C094

A2A18E

8C8C8B

Deuteranopia

F0F1C4

E1E4AA

C3C695

A4A78E

8E908A

Tritanopia

F4CBCD

EFAFB1

D29899

B28D8D

978786

Achromatopsia

E6E6E6

CECECE

B1B1B1

979797

878787

Shades & Tints Shades & Tints

#F5E8B5

Dark

Light

#F1C69E

Dark

Light

#D4A68E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5e8b5;
  --color-2: #f1c69e;
  --color-3: #d4a68e;
  --color-4: #b48a8f;
  --color-5: #987d8f;
}

SCSS

$color-1: #f5e8b5;
$color-2: #f1c69e;
$color-3: #d4a68e;
$color-4: #b48a8f;
$color-5: #987d8f;

TAILWIND

colors: {
  'brand-1': '#f5e8b5',
  'brand-2': '#f1c69e',
  'brand-3': '#d4a68e',
  'brand-4': '#b48a8f',
  'brand-5': '#987d8f',
}

RGB Array

[245, 232, 181], [241, 198, 158], [212, 166, 142], [180, 138, 143], [152, 125, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5E8B5, #F1C69E, #D4A68E, #B48A8F, #987D8F 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: #f5e8b5; --color-2: #f1c69e; --color-3: #d4a68e; --color-4: #b48a8f; --color-5: #987d8f. 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 general-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