#77687F + #B9897D + #E3946B + #EEB987 + #FCDDAE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#77687F

Dark Plum · Gray · Violet

HEX

#77687F

RGB

rgb(119, 104, 127)

HSL

hsl(279, 10%, 45%)

HSB

hsb(279, 18%, 50%)

CMYK

cmyk(6%, 18%, 0%, 50%)

Oklch

oklch(54.0% 0.040 313.9)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#B9897D

Peach Pink · DarkSalmon · Coral Red

HEX

#B9897D

RGB

rgb(185, 137, 125)

HSL

hsl(12, 30%, 61%)

HSB

hsb(12, 32%, 73%)

CMYK

cmyk(0%, 26%, 32%, 27%)

Oklch

oklch(67.3% 0.062 34.5)

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

#E3946B

Apricot · DarkSalmon · Warm Sun

HEX

#E3946B

RGB

rgb(227, 148, 107)

HSL

hsl(21, 68%, 65%)

HSB

hsb(21, 53%, 89%)

CMYK

cmyk(0%, 35%, 53%, 11%)

Oklch

oklch(73.7% 0.111 47.9)

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

#EEB987

Apricot · BurlyWood · Warm Sun

HEX

#EEB987

RGB

rgb(238, 185, 135)

HSL

hsl(29, 75%, 73%)

HSB

hsb(29, 43%, 93%)

CMYK

cmyk(0%, 22%, 43%, 7%)

Oklch

oklch(82.2% 0.090 64.4)

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

#FCDDAE

Goose Yellow · Wheat · Peach Orange

HEX

#FCDDAE

RGB

rgb(252, 221, 174)

HSL

hsl(36, 93%, 84%)

HSB

hsb(36, 31%, 99%)

CMYK

cmyk(0%, 12%, 31%, 1%)

Oklch

oklch(91.2% 0.070 78.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

77687F

6F7E67

Analogous

6B677E

77687F

7E677B

Triadic

77687F

7E7667

677E76

Split-Comp.

77687F

7B7E67

677E6B

Tetradic

77687F

7E6B67

6F7E67

677B7E

Contrast Matrix WCAG 2.1 Contrast

77687F	B9897D	E3946B	EEB987	FCDDAE
—	1.7 Fail	2.1 Fail	2.9 Fail	4.0 AA Large
1.7 Fail	—	1.3 Fail	1.7 Fail	2.3 Fail
2.1 Fail	1.3 Fail	—	1.4 Fail	1.8 Fail
2.9 Fail	1.7 Fail	1.4 Fail	—	1.3 Fail
4.0 AA Large	2.3 Fail	1.8 Fail	1.3 Fail	—

White BG

5.2AA

3.0AA Large

2.4Fail

1.8Fail

1.3Fail

Black BG

4.1AA Large

6.9AA

8.7AAA

11.9AAA

16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

717079

A4A480

C1C075

D7D793

EFEEB9

Deuteranopia

717378

A7AB81

C5CB77

DADE96

F0F3BC

Tritanopia

767574

B78283

DF7D7E

EB9D9F

FAC2C4

Achromatopsia

6F6F6F

969696

A7A7A7

C3C3C3

E1E1E1

Shades & Tints Shades & Tints

#77687F

Dark

Light

#B9897D

Dark

Light

#E3946B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #77687f;
  --color-2: #b9897d;
  --color-3: #e3946b;
  --color-4: #eeb987;
  --color-5: #fcddae;
}

SCSS

$color-1: #77687f;
$color-2: #b9897d;
$color-3: #e3946b;
$color-4: #eeb987;
$color-5: #fcddae;

TAILWIND

colors: {
  'brand-1': '#77687f',
  'brand-2': '#b9897d',
  'brand-3': '#e3946b',
  'brand-4': '#eeb987',
  'brand-5': '#fcddae',
}

RGB Array

[119, 104, 127], [185, 137, 125], [227, 148, 107], [238, 185, 135], [252, 221, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #77687F, #B9897D, #E3946B, #EEB987, #FCDDAE 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: #77687f; --color-2: #b9897d; --color-3: #e3946b; --color-4: #eeb987; --color-5: #fcddae. 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