#796F66 + #D4837F + #F1B497 + #ECD6BE + #C7CBD4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#796F66

Tangerine · DimGray · Warm Gray

HEX

#796F66

RGB

rgb(121, 111, 102)

HSL

hsl(28, 9%, 44%)

HSB

hsb(28, 16%, 47%)

CMYK

cmyk(0%, 8%, 16%, 53%)

Oklch

oklch(54.8% 0.019 64.4)

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

#D4837F

Peach Pink · LightCoral · Coral Red

HEX

#D4837F

RGB

rgb(212, 131, 127)

HSL

hsl(3, 50%, 66%)

HSB

hsb(3, 40%, 83%)

CMYK

cmyk(0%, 38%, 40%, 17%)

Oklch

oklch(69.4% 0.101 23.0)

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

#F1B497

Apricot · BurlyWood · Peach Orange

HEX

#F1B497

RGB

rgb(241, 180, 151)

HSL

hsl(19, 76%, 77%)

HSB

hsb(19, 37%, 95%)

CMYK

cmyk(0%, 25%, 37%, 5%)

Oklch

oklch(81.9% 0.082 46.5)

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

#ECD6BE

Goose Yellow · Wheat · Peach Orange

HEX

#ECD6BE

RGB

rgb(236, 214, 190)

HSL

hsl(31, 55%, 84%)

HSB

hsb(31, 19%, 93%)

CMYK

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

Oklch

oklch(88.8% 0.040 69.7)

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

#C7CBD4

Azure · LightGray · Sky Blue

HEX

#C7CBD4

RGB

rgb(199, 203, 212)

HSL

hsl(222, 13%, 81%)

HSB

hsb(222, 6%, 83%)

CMYK

cmyk(6%, 4%, 0%, 17%)

Oklch

oklch(84.2% 0.013 266.7)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

796F66

66717A

Analogous

7A6667

796F66

7A7A66

Triadic

796F66

667A70

70667A

Split-Comp.

796F66

667A7A

66677A

Tetradic

796F66

677A66

66717A

7A667A

Contrast Matrix WCAG 2.1 Contrast

796F66	D4837F	F1B497	ECD6BE	C7CBD4
—	1.7 Fail	2.7 Fail	3.5 AA Large	3.0 AA Large
1.7 Fail	—	1.6 Fail	2.0 Fail	1.8 Fail
2.7 Fail	1.6 Fail	—	1.3 Fail	1.1 Fail
3.5 AA Large	2.0 Fail	1.3 Fail	—	1.2 Fail
3.0 AA Large	1.8 Fail	1.1 Fail	1.2 Fail	—

White BG

4.9AA

2.9Fail

1.8Fail

1.4Fail

1.6Fail

Black BG

4.3AA Large

7.4AAA

11.7AAA

14.9AAA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757568

B1B080

D7D69E

E2E2C4

C9C9D2

Deuteranopia

757669

B6BC80

DADFA0

E4E5C5

C9C8D1

Tritanopia

786A6A

D08181

EEA4A5

EBC8C9

C7D0D0

Achromatopsia

717171

9B9B9B

C3C3C3

DADADA

CBCBCB

Shades & Tints Shades & Tints

#796F66

Dark

Light

#D4837F

Dark

Light

#F1B497

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #796f66;
  --color-2: #d4837f;
  --color-3: #f1b497;
  --color-4: #ecd6be;
  --color-5: #c7cbd4;
}

SCSS

$color-1: #796f66;
$color-2: #d4837f;
$color-3: #f1b497;
$color-4: #ecd6be;
$color-5: #c7cbd4;

TAILWIND

colors: {
  'brand-1': '#796f66',
  'brand-2': '#d4837f',
  'brand-3': '#f1b497',
  'brand-4': '#ecd6be',
  'brand-5': '#c7cbd4',
}

RGB Array

[121, 111, 102], [212, 131, 127], [241, 180, 151], [236, 214, 190], [199, 203, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #796F66, #D4837F, #F1B497, #ECD6BE, #C7CBD4 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: #796f66; --color-2: #d4837f; --color-3: #f1b497; --color-4: #ecd6be; --color-5: #c7cbd4. 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