#7E8479 + #E7D8BC + #D6BEAE + #DE8D86 + #F37073 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7E8479

Ink Gray · Gray · Warm Gray

HEX

#7E8479

RGB

rgb(126, 132, 121)

HSL

hsl(93, 4%, 50%)

HSB

hsb(93, 8%, 52%)

CMYK

cmyk(5%, 0%, 8%, 48%)

Oklch

oklch(60.5% 0.018 130.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#E7D8BC

Goose Yellow · Wheat · Peach Orange

HEX

#E7D8BC

RGB

rgb(231, 216, 188)

HSL

hsl(39, 47%, 82%)

HSB

hsb(39, 19%, 91%)

CMYK

cmyk(0%, 6%, 19%, 9%)

Oklch

oklch(88.7% 0.041 83.1)

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

#D6BEAE

Apricot · Silver · Peach Orange

HEX

#D6BEAE

RGB

rgb(214, 190, 174)

HSL

hsl(24, 33%, 76%)

HSB

hsb(24, 19%, 84%)

CMYK

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

Oklch

oklch(81.7% 0.035 55.8)

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

#DE8D86

Peach Pink · DarkSalmon · Coral Red

HEX

#DE8D86

RGB

rgb(222, 141, 134)

HSL

hsl(5, 57%, 70%)

HSB

hsb(5, 40%, 87%)

CMYK

cmyk(0%, 36%, 40%, 13%)

Oklch

oklch(72.5% 0.100 25.2)

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

#F37073

Peach Pink · Salmon · Coral Red

HEX

#F37073

RGB

rgb(243, 112, 115)

HSL

hsl(359, 85%, 70%)

HSB

hsb(359, 54%, 95%)

CMYK

cmyk(0%, 54%, 53%, 5%)

Oklch

oklch(70.3% 0.162 20.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7E8479

807A85

Analogous

84857A

7E8479

7A857B

Triadic

7E8479

7A7F85

857A7F

Split-Comp.

7E8479

7B7A85

857A84

Tetradic

7E8479

7A8485

807A85

857B7A

Contrast Matrix WCAG 2.1 Contrast

7E8479	E7D8BC	D6BEAE	DE8D86	F37073
—	2.7 Fail	2.2 Fail	1.5 Fail	1.4 Fail
2.7 Fail	—	1.3 Fail	1.8 Fail	2.0 Fail
2.2 Fail	1.3 Fail	—	1.4 Fail	1.6 Fail
1.5 Fail	1.8 Fail	1.4 Fail	—	1.1 Fail
1.4 Fail	2.0 Fail	1.6 Fail	1.1 Fail	—

White BG

3.8AA Large

1.4Fail

1.8Fail

2.5Fail

2.8Fail

Black BG

5.5AA

14.9AAA

11.8AAA

8.3AAA

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

81817C

E1E0C3

CCCBB2

BBBA88

BAB972

Deuteranopia

80807C

E1E3C4

CDCFB3

C0C688

C2CC72

Tritanopia

7E7E7E

E6C8C9

D5B5B6

DA8989

EC7272

Achromatopsia

818181

D9D9D9

C3C3C3

A4A4A4

989898

Shades & Tints Shades & Tints

#7E8479

Dark

Light

#E7D8BC

Dark

Light

#D6BEAE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7e8479;
  --color-2: #e7d8bc;
  --color-3: #d6beae;
  --color-4: #de8d86;
  --color-5: #f37073;
}

SCSS

$color-1: #7e8479;
$color-2: #e7d8bc;
$color-3: #d6beae;
$color-4: #de8d86;
$color-5: #f37073;

TAILWIND

colors: {
  'brand-1': '#7e8479',
  'brand-2': '#e7d8bc',
  'brand-3': '#d6beae',
  'brand-4': '#de8d86',
  'brand-5': '#f37073',
}

RGB Array

[126, 132, 121], [231, 216, 188], [214, 190, 174], [222, 141, 134], [243, 112, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7E8479, #E7D8BC, #D6BEAE, #DE8D86, #F37073 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: #7e8479; --color-2: #e7d8bc; --color-3: #d6beae; --color-4: #de8d86; --color-5: #f37073. 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