#F1D9B7 + #E9C0AA + #D6A388 + #9F8A87 + #8D7374 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1D9B7

Goose Yellow · Wheat · Peach Orange

HEX

#F1D9B7

RGB

rgb(241, 217, 183)

HSL

hsl(35, 67%, 83%)

HSB

hsb(35, 24%, 95%)

CMYK

cmyk(0%, 10%, 24%, 5%)

Oklch

oklch(89.6% 0.052 76.5)

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

#E9C0AA

Apricot · LightPink · Peach Orange

HEX

#E9C0AA

RGB

rgb(233, 192, 170)

HSL

hsl(21, 59%, 79%)

HSB

hsb(21, 27%, 91%)

CMYK

cmyk(0%, 18%, 27%, 9%)

Oklch

oklch(83.8% 0.056 49.8)

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

#D6A388

Apricot · Tan · Warm Sun

HEX

#D6A388

RGB

rgb(214, 163, 136)

HSL

hsl(21, 49%, 69%)

HSB

hsb(21, 36%, 84%)

CMYK

cmyk(0%, 24%, 36%, 16%)

Oklch

oklch(75.6% 0.071 49.1)

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

#9F8A87

Crimson · Gray · Passion Red

HEX

#9F8A87

RGB

rgb(159, 138, 135)

HSL

hsl(7, 11%, 58%)

HSB

hsb(7, 15%, 62%)

CMYK

cmyk(0%, 13%, 15%, 38%)

Oklch

oklch(65.2% 0.026 27.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#8D7374

Crimson · Gray · Passion Red

HEX

#8D7374

RGB

rgb(141, 115, 116)

HSL

hsl(358, 10%, 50%)

HSB

hsb(358, 18%, 55%)

CMYK

cmyk(0%, 18%, 18%, 45%)

Oklch

oklch(58.1% 0.033 15.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1D9B7

B7CFF1

Analogous

F1BBB7

F1D9B7

ECF1B7

Triadic

F1D9B7

B7F1D8

D8B7F1

Split-Comp.

F1D9B7

B7ECF1

BBB7F1

Tetradic

F1D9B7

B7F1BB

B7CFF1

F1B7EC

Contrast Matrix WCAG 2.1 Contrast

F1D9B7	E9C0AA	D6A388	9F8A87	8D7374
—	1.2 Fail	1.6 Fail	2.4 Fail	3.2 AA Large
1.2 Fail	—	1.3 Fail	1.9 Fail	2.6 Fail
1.6 Fail	1.3 Fail	—	1.5 Fail	2.0 Fail
2.4 Fail	1.9 Fail	1.5 Fail	—	1.3 Fail
3.2 AA Large	2.6 Fail	2.0 Fail	1.3 Fail	—

White BG

1.4Fail

1.7Fail

2.2Fail

3.3AA Large

4.3AA Large

Black BG

15.3AAA

12.6AAA

9.5AAA

6.5AA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E6BF

D7D7AF

C0BF8F

969688

828274

Deuteranopia

E8EAC1

DADDB1

C3C790

979988

838574

Tritanopia

F0C6C7

E7B4B4

D39495

9E8888

8C7474

Achromatopsia

DCDCDC

CACACA

AFAFAF

909090

7B7B7B

Shades & Tints Shades & Tints

#F1D9B7

Dark

Light

#E9C0AA

Dark

Light

#D6A388

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1d9b7;
  --color-2: #e9c0aa;
  --color-3: #d6a388;
  --color-4: #9f8a87;
  --color-5: #8d7374;
}

SCSS

$color-1: #f1d9b7;
$color-2: #e9c0aa;
$color-3: #d6a388;
$color-4: #9f8a87;
$color-5: #8d7374;

TAILWIND

colors: {
  'brand-1': '#f1d9b7',
  'brand-2': '#e9c0aa',
  'brand-3': '#d6a388',
  'brand-4': '#9f8a87',
  'brand-5': '#8d7374',
}

RGB Array

[241, 217, 183], [233, 192, 170], [214, 163, 136], [159, 138, 135], [141, 115, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1D9B7, #E9C0AA, #D6A388, #9F8A87, #8D7374 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: #f1d9b7; --color-2: #e9c0aa; --color-3: #d6a388; --color-4: #9f8a87; --color-5: #8d7374. 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