#B86B73 + #B5A3A3 + #CFB8B8 + #E3D9CC + #FFF0DB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B86B73

Crimson · Gray · Passion Red

HEX

#B86B73

RGB

rgb(184, 107, 115)

HSL

hsl(354, 35%, 57%)

HSB

hsb(354, 42%, 72%)

CMYK

cmyk(0%, 42%, 38%, 28%)

Oklch

oklch(61.5% 0.098 13.7)

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

#B5A3A3

Peach Pink · DarkGray · Coral Red

HEX

#B5A3A3

RGB

rgb(181, 163, 163)

HSL

hsl(0, 11%, 67%)

HSB

hsb(0, 10%, 71%)

CMYK

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

Oklch

oklch(73.1% 0.021 17.6)

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

#CFB8B8

Peach Pink · Silver · Coral Red

HEX

#CFB8B8

RGB

rgb(207, 184, 184)

HSL

hsl(0, 19%, 77%)

HSB

hsb(0, 11%, 81%)

CMYK

cmyk(0%, 11%, 11%, 19%)

Oklch

oklch(80.2% 0.026 17.7)

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

#E3D9CC

Goose Yellow · LightGray · Peach Orange

HEX

#E3D9CC

RGB

rgb(227, 217, 204)

HSL

hsl(34, 29%, 85%)

HSB

hsb(34, 10%, 89%)

CMYK

cmyk(0%, 4%, 10%, 11%)

Oklch

oklch(89.0% 0.021 74.6)

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

#FFF0DB

Goose Yellow · Beige · Peach Orange

HEX

#FFF0DB

RGB

rgb(255, 240, 219)

HSL

hsl(35, 100%, 93%)

HSB

hsb(35, 14%, 100%)

CMYK

cmyk(0%, 6%, 14%, 0%)

Oklch

oklch(96.1% 0.032 76.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B86B73

6BB8B0

Analogous

B86B99

B86B73

B88A6B

Triadic

B86B73

73B86B

6B73B8

Split-Comp.

B86B73

6BB88A

6B99B8

Tetradic

B86B73

99B86B

6BB8B0

8A6BB8

Contrast Matrix WCAG 2.1 Contrast

B86B73	B5A3A3	CFB8B8	E3D9CC	FFF0DB
—	1.6 Fail	2.1 Fail	2.8 Fail	3.5 AA Large
1.6 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
2.1 Fail	1.3 Fail	—	1.3 Fail	1.7 Fail
2.8 Fail	1.7 Fail	1.3 Fail	—	1.2 Fail
3.5 AA Large	2.1 Fail	1.7 Fail	1.2 Fail	—

White BG

3.9AA Large

2.4Fail

1.9Fail

1.4Fail

1.1Fail

Black BG

5.4AA

8.7AAA

11.2AAA

15.1AAA

18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

979671

ADADA3

C5C5B8

DFDFCF

F9F8E0

Deuteranopia

9BA171

AEB0A3

C6C8B8

DFE0D0

F9FBE1

Tritanopia

B4706F

B4A3A3

CEB8B8

E2D2D2

FEE4E5

Achromatopsia

838383

A8A8A8

BFBFBF

DBDBDB

F2F2F2

Shades & Tints Shades & Tints

#B86B73

Dark

Light

#B5A3A3

Dark

Light

#CFB8B8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b86b73;
  --color-2: #b5a3a3;
  --color-3: #cfb8b8;
  --color-4: #e3d9cc;
  --color-5: #fff0db;
}

SCSS

$color-1: #b86b73;
$color-2: #b5a3a3;
$color-3: #cfb8b8;
$color-4: #e3d9cc;
$color-5: #fff0db;

TAILWIND

colors: {
  'brand-1': '#b86b73',
  'brand-2': '#b5a3a3',
  'brand-3': '#cfb8b8',
  'brand-4': '#e3d9cc',
  'brand-5': '#fff0db',
}

RGB Array

[184, 107, 115], [181, 163, 163], [207, 184, 184], [227, 217, 204], [255, 240, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B86B73, #B5A3A3, #CFB8B8, #E3D9CC, #FFF0DB 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: #b86b73; --color-2: #b5a3a3; --color-3: #cfb8b8; --color-4: #e3d9cc; --color-5: #fff0db. 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