#7C816F + #CCCDA8 + #E8CA92 + #E4B786 + #DCA786 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7C816F

Ink Gray · Gray · Warm Gray

HEX

#7C816F

RGB

rgb(124, 129, 111)

HSL

hsl(77, 7%, 47%)

HSB

hsb(77, 14%, 51%)

CMYK

cmyk(4%, 0%, 14%, 49%)

Oklch

oklch(59.4% 0.027 119.9)

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

#CCCDA8

Fresh Green · Silver · Sunflower

HEX

#CCCDA8

RGB

rgb(204, 205, 168)

HSL

hsl(62, 27%, 73%)

HSB

hsb(62, 18%, 80%)

CMYK

cmyk(0%, 0%, 18%, 20%)

Oklch

oklch(83.8% 0.050 108.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#E8CA92

Goose Yellow · BurlyWood · Warm Sun

HEX

#E8CA92

RGB

rgb(232, 202, 146)

HSL

hsl(39, 65%, 74%)

HSB

hsb(39, 37%, 91%)

CMYK

cmyk(0%, 13%, 37%, 9%)

Oklch

oklch(85.1% 0.080 82.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#E4B786

Goose Yellow · BurlyWood · Warm Sun

HEX

#E4B786

RGB

rgb(228, 183, 134)

HSL

hsl(31, 64%, 71%)

HSB

hsb(31, 41%, 89%)

CMYK

cmyk(0%, 20%, 41%, 11%)

Oklch

oklch(80.8% 0.083 68.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#DCA786

Apricot · BurlyWood · Warm Sun

HEX

#DCA786

RGB

rgb(220, 167, 134)

HSL

hsl(23, 55%, 69%)

HSB

hsb(23, 39%, 86%)

CMYK

cmyk(0%, 24%, 39%, 14%)

Oklch

oklch(77.0% 0.077 53.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C816F

746F80

Analogous

807D6F

7C816F

73806F

Triadic

7C816F

6F7B80

806F7B

Split-Comp.

7C816F

6F7380

7D6F80

Tetradic

7C816F

6F807D

746F80

806F73

Contrast Matrix WCAG 2.1 Contrast

7C816F	CCCDA8	E8CA92	E4B786	DCA786
—	2.5 Fail	2.5 Fail	2.2 Fail	1.9 Fail
2.5 Fail	—	1.0 Fail	1.1 Fail	1.3 Fail
2.5 Fail	1.0 Fail	—	1.2 Fail	1.3 Fail
2.2 Fail	1.1 Fail	1.2 Fail	—	1.2 Fail
1.9 Fail	1.3 Fail	1.3 Fail	1.2 Fail	—

White BG

4.0AA Large

1.6Fail

1.8Fail

2.1Fail

Black BG

5.2AA

12.9AAA

13.3AAA

11.4AAA

9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E73

CCCCB1

DBDBA0

D1D092

C5C58E

Deuteranopia

7E7E74

CCCCB3

DDDFA3

D3D795

C8CC90

Tritanopia

7C7778

CCB8BA

E6AAAD

E29B9D

D99496

Achromatopsia

7D7D7D

C8C8C8

CDCDCD

BFBFBF

B3B3B3

Shades & Tints Shades & Tints

#7C816F

Dark

Light

#CCCDA8

Dark

Light

#E8CA92

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c816f;
  --color-2: #cccda8;
  --color-3: #e8ca92;
  --color-4: #e4b786;
  --color-5: #dca786;
}

SCSS

$color-1: #7c816f;
$color-2: #cccda8;
$color-3: #e8ca92;
$color-4: #e4b786;
$color-5: #dca786;

TAILWIND

colors: {
  'brand-1': '#7c816f',
  'brand-2': '#cccda8',
  'brand-3': '#e8ca92',
  'brand-4': '#e4b786',
  'brand-5': '#dca786',
}

RGB Array

[124, 129, 111], [204, 205, 168], [232, 202, 146], [228, 183, 134], [220, 167, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7C816F, #CCCDA8, #E8CA92, #E4B786, #DCA786 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: #7c816f; --color-2: #cccda8; --color-3: #e8ca92; --color-4: #e4b786; --color-5: #dca786. 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