#BF4D77 + #D67676 + #BAB56D + #E0D6B1 + #F0E9D1 · skin - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BF4D77

Dark Violet · MediumVioletRed · Rose Pink

HEX

#BF4D77

RGB

rgb(191, 77, 119)

HSL

hsl(338, 47%, 53%)

HSB

hsb(338, 60%, 75%)

CMYK

cmyk(0%, 60%, 38%, 25%)

Oklch

oklch(58.1% 0.152 360.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#D67676

Peach Pink · LightCoral · Coral Red

HEX

#D67676

RGB

rgb(214, 118, 118)

HSL

hsl(0, 54%, 65%)

HSB

hsb(0, 45%, 84%)

CMYK

cmyk(0%, 45%, 45%, 16%)

Oklch

oklch(67.3% 0.120 20.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#BAB56D

Autumn Sage · Tan · Sunflower

HEX

#BAB56D

RGB

rgb(186, 181, 109)

HSL

hsl(56, 36%, 58%)

HSB

hsb(56, 41%, 73%)

CMYK

cmyk(0%, 3%, 41%, 27%)

Oklch

oklch(76.1% 0.094 105.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E0D6B1

Goose Yellow · Wheat · Lemon Cream

HEX

#E0D6B1

RGB

rgb(224, 214, 177)

HSL

hsl(47, 43%, 79%)

HSB

hsb(47, 21%, 88%)

CMYK

cmyk(0%, 4%, 21%, 12%)

Oklch

oklch(87.5% 0.050 94.7)

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

#F0E9D1

Goose Yellow · Beige · Lemon Cream

HEX

#F0E9D1

RGB

rgb(240, 233, 209)

HSL

hsl(46, 51%, 88%)

HSB

hsb(46, 13%, 94%)

CMYK

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

Oklch

oklch(93.3% 0.033 93.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF4D77

4FBF96

Analogous

BF4FB0

BF4D77

BF5E4F

Triadic

BF4D77

78BF4F

4F78BF

Split-Comp.

BF4D77

4FBF5E

4FB0BF

Tetradic

BF4D77

B0BF4F

4FBF96

5E4FBF

Contrast Matrix WCAG 2.1 Contrast

BF4D77	D67676	BAB56D	E0D6B1	F0E9D1
—	1.5 Fail	2.2 Fail	3.2 AA Large	3.8 AA Large
1.5 Fail	—	1.5 Fail	2.1 Fail	2.6 Fail
2.2 Fail	1.5 Fail	—	1.5 Fail	1.7 Fail
3.2 AA Large	2.1 Fail	1.5 Fail	—	1.2 Fail
3.8 AA Large	2.6 Fail	1.7 Fail	1.2 Fail	—

White BG

4.6AA

3.1AA Large

2.1Fail

1.5Fail

1.2Fail

Black BG

4.5AA

6.7AA

9.9AAA

14.4AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8D6D

ACAC76

B8B87E

DCDCBA

EDEDD7

Deuteranopia

949D6A

B2B976

B8B983

DCDDBC

EDEED8

Tritanopia

B96563

D17676

BA8C8F

DFC1C3

F0DBDC

Achromatopsia

747474

939393

AEAEAE

D5D5D5

E8E8E8

Shades & Tints Shades & Tints

#BF4D77

Dark

Light

#D67676

Dark

Light

#BAB56D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf4d77;
  --color-2: #d67676;
  --color-3: #bab56d;
  --color-4: #e0d6b1;
  --color-5: #f0e9d1;
}

SCSS

$color-1: #bf4d77;
$color-2: #d67676;
$color-3: #bab56d;
$color-4: #e0d6b1;
$color-5: #f0e9d1;

TAILWIND

colors: {
  'brand-1': '#bf4d77',
  'brand-2': '#d67676',
  'brand-3': '#bab56d',
  'brand-4': '#e0d6b1',
  'brand-5': '#f0e9d1',
}

RGB Array

[191, 77, 119], [214, 118, 118], [186, 181, 109], [224, 214, 177], [240, 233, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #BF4D77, #D67676, #BAB56D, #E0D6B1, #F0E9D1 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: #bf4d77; --color-2: #d67676; --color-3: #bab56d; --color-4: #e0d6b1; --color-5: #f0e9d1. 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 skin-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