#7C676C + #DE877E + #FCA871 + #FCD777 + #BDAA9C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7C676C

Crimson · DimGray · Warm Gray

HEX

#7C676C

RGB

rgb(124, 103, 108)

HSL

hsl(346, 9%, 45%)

HSB

hsb(346, 17%, 49%)

CMYK

cmyk(0%, 17%, 13%, 51%)

Oklch

oklch(53.6% 0.028 2.1)

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

#DE877E

Peach Pink · DarkSalmon · Coral Red

HEX

#DE877E

RGB

rgb(222, 135, 126)

HSL

hsl(6, 59%, 68%)

HSB

hsb(6, 43%, 87%)

CMYK

cmyk(0%, 39%, 43%, 13%)

Oklch

oklch(71.3% 0.108 26.5)

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

#FCA871

Apricot · LightSalmon · Warm Sun

HEX

#FCA871

RGB

rgb(252, 168, 113)

HSL

hsl(24, 96%, 72%)

HSB

hsb(24, 55%, 99%)

CMYK

cmyk(0%, 33%, 55%, 1%)

Oklch

oklch(80.3% 0.122 53.4)

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

#FCD777

Goose Yellow · Khaki · Sunflower

HEX

#FCD777

RGB

rgb(252, 215, 119)

HSL

hsl(43, 96%, 73%)

HSB

hsb(43, 53%, 99%)

CMYK

cmyk(0%, 15%, 53%, 1%)

Oklch

oklch(89.1% 0.122 88.8)

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

#BDAA9C

Apricot · DarkGray · Warm Sun

HEX

#BDAA9C

RGB

rgb(189, 170, 156)

HSL

hsl(25, 20%, 68%)

HSB

hsb(25, 17%, 74%)

CMYK

cmyk(0%, 10%, 17%, 26%)

Oklch

oklch(75.0% 0.030 58.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C676C

687D78

Analogous

7D6878

7C676C

7D6E68

Triadic

7C676C

6D7D68

686D7D

Split-Comp.

7C676C

687D6E

68787D

Tetradic

7C676C

787D68

687D78

6E687D

Contrast Matrix WCAG 2.1 Contrast

7C676C	DE877E	FCA871	FCD777	BDAA9C
—	2.0 Fail	2.7 Fail	3.8 AA Large	2.3 Fail
2.0 Fail	—	1.4 Fail	1.9 Fail	1.2 Fail
2.7 Fail	1.4 Fail	—	1.4 Fail	1.2 Fail
3.8 AA Large	1.9 Fail	1.4 Fail	—	1.6 Fail
2.3 Fail	1.2 Fail	1.2 Fail	1.6 Fail	—

White BG

5.2AA

2.7Fail

1.9Fail

1.4Fail

2.2Fail

Black BG

4.0AA Large

7.9AAA

11.0AAA

15.1AAA

9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

73736B

B8B880

D8D77E

ECEC8E

B5B59F

Deuteranopia

74766B

BDC481

DDE382

EEF194

B6B7A0

Tritanopia

7B6A6A

DA8282

F8898B

FAA1A5

BCA2A3

Achromatopsia

6E6E6E

A0A0A0

BBBBBB

D7D7D7

AEAEAE

Shades & Tints Shades & Tints

#7C676C

Dark

Light

#DE877E

Dark

Light

#FCA871

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c676c;
  --color-2: #de877e;
  --color-3: #fca871;
  --color-4: #fcd777;
  --color-5: #bdaa9c;
}

SCSS

$color-1: #7c676c;
$color-2: #de877e;
$color-3: #fca871;
$color-4: #fcd777;
$color-5: #bdaa9c;

TAILWIND

colors: {
  'brand-1': '#7c676c',
  'brand-2': '#de877e',
  'brand-3': '#fca871',
  'brand-4': '#fcd777',
  'brand-5': '#bdaa9c',
}

RGB Array

[124, 103, 108], [222, 135, 126], [252, 168, 113], [252, 215, 119], [189, 170, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7C676C, #DE877E, #FCA871, #FCD777, #BDAA9C 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: #7c676c; --color-2: #de877e; --color-3: #fca871; --color-4: #fcd777; --color-5: #bdaa9c. 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