#867179 + #8FAAA2 + #B5E1D9 + #F3DEBD + #C5B497 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#867179

Dark Violet · Gray · Warm Gray

HEX

#867179

RGB

rgb(134, 113, 121)

HSL

hsl(337, 9%, 48%)

HSB

hsb(337, 16%, 53%)

CMYK

cmyk(0%, 16%, 10%, 47%)

Oklch

oklch(57.1% 0.029 353.1)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#8FAAA2

Jade · DarkSeaGreen · Lake Green

HEX

#8FAAA2

RGB

rgb(143, 170, 162)

HSL

hsl(162, 14%, 61%)

HSB

hsb(162, 16%, 67%)

CMYK

cmyk(16%, 0%, 5%, 33%)

Oklch

oklch(71.5% 0.032 175.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#B5E1D9

Jade · LightBlue · Glacier Blue

HEX

#B5E1D9

RGB

rgb(181, 225, 217)

HSL

hsl(169, 42%, 80%)

HSB

hsb(169, 20%, 88%)

CMYK

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

Oklch

oklch(87.6% 0.047 182.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#F3DEBD

Goose Yellow · Wheat · Peach Orange

HEX

#F3DEBD

RGB

rgb(243, 222, 189)

HSL

hsl(37, 69%, 85%)

HSB

hsb(37, 22%, 95%)

CMYK

cmyk(0%, 9%, 22%, 5%)

Oklch

oklch(90.9% 0.049 79.1)

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

#C5B497

Ginger · Tan · Warm Sun

HEX

#C5B497

RGB

rgb(197, 180, 151)

HSL

hsl(38, 28%, 68%)

HSB

hsb(38, 23%, 77%)

CMYK

cmyk(0%, 9%, 23%, 23%)

Oklch

oklch(77.7% 0.044 81.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

867179

6F857D

Analogous

856F83

867179

85726F

Triadic

867179

78856F

6F7885

Split-Comp.

867179

6F8572

6F8385

Tetradic

867179

83856F

6F857D

726F85

Contrast Matrix WCAG 2.1 Contrast

867179	8FAAA2	B5E1D9	F3DEBD	C5B497
—	1.8 Fail	3.2 AA Large	3.4 AA Large	2.2 Fail
1.8 Fail	—	1.7 Fail	1.9 Fail	1.2 Fail
3.2 AA Large	1.7 Fail	—	1.1 Fail	1.4 Fail
3.4 AA Large	1.9 Fail	1.1 Fail	—	1.5 Fail
2.2 Fail	1.2 Fail	1.4 Fail	1.5 Fail	—

White BG

4.5AA

2.5Fail

1.4Fail

1.3Fail

2.0Fail

Black BG

4.7AA

8.4AAA

14.7AAA

16.0AAA

10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D77

9B9BA4

C8C8DB

EAEAC5

BEBD9E

Deuteranopia

7E8077

9997A4

C6C2DB

EBEDC7

BFC0A0

Tritanopia

857675

90A5A6

B7DCDD

F2CBCD

C4A4A5

Achromatopsia

787878

A1A1A1

D3D3D3

E1E1E1

B6B6B6

Shades & Tints Shades & Tints

#867179

Dark

Light

#8FAAA2

Dark

Light

#B5E1D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #867179;
  --color-2: #8faaa2;
  --color-3: #b5e1d9;
  --color-4: #f3debd;
  --color-5: #c5b497;
}

SCSS

$color-1: #867179;
$color-2: #8faaa2;
$color-3: #b5e1d9;
$color-4: #f3debd;
$color-5: #c5b497;

TAILWIND

colors: {
  'brand-1': '#867179',
  'brand-2': '#8faaa2',
  'brand-3': '#b5e1d9',
  'brand-4': '#f3debd',
  'brand-5': '#c5b497',
}

RGB Array

[134, 113, 121], [143, 170, 162], [181, 225, 217], [243, 222, 189], [197, 180, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #867179, #8FAAA2, #B5E1D9, #F3DEBD, #C5B497 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: #867179; --color-2: #8faaa2; --color-3: #b5e1d9; --color-4: #f3debd; --color-5: #c5b497. 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