#C7B6A3 + #E6C191 + #F2AF74 + #E68E7C + #8C878C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7B6A3

Goose Yellow · Tan · Warm Sun

HEX

#C7B6A3

RGB

rgb(199, 182, 163)

HSL

hsl(32, 24%, 71%)

HSB

hsb(32, 18%, 78%)

CMYK

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

Oklch

oklch(78.5% 0.033 70.4)

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

#E6C191

Goose Yellow · BurlyWood · Warm Sun

HEX

#E6C191

RGB

rgb(230, 193, 145)

HSL

hsl(34, 63%, 74%)

HSB

hsb(34, 37%, 90%)

CMYK

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

Oklch

oklch(83.2% 0.076 73.7)

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

#F2AF74

Apricot · LightSalmon · Warm Sun

HEX

#F2AF74

RGB

rgb(242, 175, 116)

HSL

hsl(28, 83%, 70%)

HSB

hsb(28, 52%, 95%)

CMYK

cmyk(0%, 28%, 52%, 5%)

Oklch

oklch(80.5% 0.109 61.7)

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

#E68E7C

Peach Pink · DarkSalmon · Coral Red

HEX

#E68E7C

RGB

rgb(230, 142, 124)

HSL

hsl(10, 68%, 69%)

HSB

hsb(10, 46%, 90%)

CMYK

cmyk(0%, 38%, 46%, 10%)

Oklch

oklch(73.4% 0.111 32.3)

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

#8C878C

Ash · Gray · Warm Gray

HEX

#8C878C

RGB

rgb(140, 135, 140)

HSL

hsl(300, 2%, 54%)

HSB

hsb(300, 4%, 55%)

CMYK

cmyk(0%, 4%, 0%, 45%)

Oklch

oklch(62.9% 0.009 325.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7B6A3

A3B4C7

Analogous

C7A4A3

C7B6A3

C6C7A3

Triadic

C7B6A3

A3C7B6

B6A3C7

Split-Comp.

C7B6A3

A3C6C7

A4A3C7

Tetradic

C7B6A3

A3C7A4

A3B4C7

C7A3C6

Contrast Matrix WCAG 2.1 Contrast

C7B6A3	E6C191	F2AF74	E68E7C	8C878C
—	1.2 Fail	1.0 Fail	1.2 Fail	1.8 Fail
1.2 Fail	—	1.1 Fail	1.5 Fail	2.1 Fail
1.0 Fail	1.1 Fail	—	1.3 Fail	1.9 Fail
1.2 Fail	1.5 Fail	1.3 Fail	—	1.4 Fail
1.8 Fail	2.1 Fail	1.9 Fail	1.4 Fail	—

White BG

2.0Fail

1.7Fail

1.9Fail

2.5Fail

3.5AA Large

Black BG

10.6AAA

12.4AAA

11.2AAA

8.5AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BFA8

D6D69D

D5D482

C0BF80

8A8A8B

Deuteranopia

C1C2A9

D8DB9F

D9DE86

C5CC81

8A8B8B

Tritanopia

C6ABAC

E4A6A8

EF8E90

E28485

8C8A8A

Achromatopsia

B9B9B9

C7C7C7

BCBCBC

A6A6A6

898989

Shades & Tints Shades & Tints

#C7B6A3

Dark

Light

#E6C191

Dark

Light

#F2AF74

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7b6a3;
  --color-2: #e6c191;
  --color-3: #f2af74;
  --color-4: #e68e7c;
  --color-5: #8c878c;
}

SCSS

$color-1: #c7b6a3;
$color-2: #e6c191;
$color-3: #f2af74;
$color-4: #e68e7c;
$color-5: #8c878c;

TAILWIND

colors: {
  'brand-1': '#c7b6a3',
  'brand-2': '#e6c191',
  'brand-3': '#f2af74',
  'brand-4': '#e68e7c',
  'brand-5': '#8c878c',
}

RGB Array

[199, 182, 163], [230, 193, 145], [242, 175, 116], [230, 142, 124], [140, 135, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7B6A3, #E6C191, #F2AF74, #E68E7C, #8C878C 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: #c7b6a3; --color-2: #e6c191; --color-3: #f2af74; --color-4: #e68e7c; --color-5: #8c878c. 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