#6E7F97 + #ECBCA9 + #F9F8C9 + #837A70 + #E9A084 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6E7F97

Azure · SlateGray · Navy Blue

HEX

#6E7F97

RGB

rgb(110, 127, 151)

HSL

hsl(215, 16%, 51%)

HSB

hsb(215, 27%, 59%)

CMYK

cmyk(27%, 16%, 0%, 41%)

Oklch

oklch(59.1% 0.042 257.0)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#ECBCA9

Apricot · LightPink · Peach Orange

HEX

#ECBCA9

RGB

rgb(236, 188, 169)

HSL

hsl(17, 64%, 79%)

HSB

hsb(17, 28%, 93%)

CMYK

cmyk(0%, 20%, 28%, 7%)

Oklch

oklch(83.3% 0.062 42.7)

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

#F9F8C9

Fresh Green · Beige · Lemon Cream

HEX

#F9F8C9

RGB

rgb(249, 248, 201)

HSL

hsl(59, 80%, 88%)

HSB

hsb(59, 19%, 98%)

CMYK

cmyk(0%, 0%, 19%, 2%)

Oklch

oklch(96.8% 0.061 106.5)

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

#837A70

Ochre · Gray · Warm Gray

HEX

#837A70

RGB

rgb(131, 122, 112)

HSL

hsl(32, 8%, 48%)

HSB

hsb(32, 15%, 51%)

CMYK

cmyk(0%, 7%, 15%, 49%)

Oklch

oklch(58.5% 0.019 70.4)

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

#E9A084

Apricot · DarkSalmon · Warm Sun

HEX

#E9A084

RGB

rgb(233, 160, 132)

HSL

hsl(17, 70%, 72%)

HSB

hsb(17, 43%, 91%)

CMYK

cmyk(0%, 31%, 43%, 9%)

Oklch

oklch(77.0% 0.096 41.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6E7F97

96856E

Analogous

6E9396

6E7F97

716E96

Triadic

6E7F97

966E7F

7F966E

Split-Comp.

6E7F97

96716E

93966E

Tetradic

6E7F97

966E93

96856E

6E9671

Contrast Matrix WCAG 2.1 Contrast

6E7F97	ECBCA9	F9F8C9	837A70	E9A084
—	2.4 Fail	3.8 AA Large	1.0 Fail	1.9 Fail
2.4 Fail	—	1.6 Fail	2.5 Fail	1.3 Fail
3.8 AA Large	1.6 Fail	—	3.9 AA Large	2.0 Fail
1.0 Fail	2.5 Fail	3.9 AA Large	—	2.0 Fail
1.9 Fail	1.3 Fail	2.0 Fail	2.0 Fail	—

White BG

4.1AA Large

1.7Fail

1.1Fail

4.2AA Large

2.1Fail

Black BG

5.1AA

12.3AAA

19.3AAA

5.0AA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757691

D7D7AE

F9F9D4

7F7F72

C9C98B

Deuteranopia

747390

DADEAF

F9F9D7

808073

CED38C

Tritanopia

6F8D8C

EAB1B2

F9DDDF

837475

E59091

Achromatopsia

7D7D7D

C8C8C8

F3F3F3

7C7C7C

B3B3B3

Shades & Tints Shades & Tints

#6E7F97

Dark

Light

#ECBCA9

Dark

Light

#F9F8C9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6e7f97;
  --color-2: #ecbca9;
  --color-3: #f9f8c9;
  --color-4: #837a70;
  --color-5: #e9a084;
}

SCSS

$color-1: #6e7f97;
$color-2: #ecbca9;
$color-3: #f9f8c9;
$color-4: #837a70;
$color-5: #e9a084;

TAILWIND

colors: {
  'brand-1': '#6e7f97',
  'brand-2': '#ecbca9',
  'brand-3': '#f9f8c9',
  'brand-4': '#837a70',
  'brand-5': '#e9a084',
}

RGB Array

[110, 127, 151], [236, 188, 169], [249, 248, 201], [131, 122, 112], [233, 160, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6E7F97, #ECBCA9, #F9F8C9, #837A70, #E9A084 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: #6e7f97; --color-2: #ecbca9; --color-3: #f9f8c9; --color-4: #837a70; --color-5: #e9a084. 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