#808E7F + #F6A313 + #B7CA9C + #C4D9A5 + #E1EEC8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#808E7F

Ash · Gray · Warm Gray

HEX

#808E7F

RGB

rgb(128, 142, 127)

HSL

hsl(116, 6%, 53%)

HSB

hsb(116, 11%, 56%)

CMYK

cmyk(10%, 0%, 11%, 44%)

Oklch

oklch(63.1% 0.027 143.4)

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

#F6A313

Ginger · Orange · Warm Sun

HEX

#F6A313

RGB

rgb(246, 163, 19)

HSL

hsl(38, 93%, 52%)

HSB

hsb(38, 92%, 96%)

CMYK

cmyk(0%, 34%, 92%, 4%)

Oklch

oklch(77.9% 0.163 72.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B7CA9C

Willow Green · DarkGray · Apple Green

HEX

#B7CA9C

RGB

rgb(183, 202, 156)

HSL

hsl(85, 30%, 70%)

HSB

hsb(85, 23%, 79%)

CMYK

cmyk(9%, 0%, 23%, 21%)

Oklch

oklch(81.3% 0.066 126.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#C4D9A5

Willow Green · Silver · Apple Green

HEX

#C4D9A5

RGB

rgb(196, 217, 165)

HSL

hsl(84, 41%, 75%)

HSB

hsb(84, 24%, 85%)

CMYK

cmyk(10%, 0%, 24%, 15%)

Oklch

oklch(85.6% 0.073 125.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E1EEC8

Willow Green · Beige · Mint Green

HEX

#E1EEC8

RGB

rgb(225, 238, 200)

HSL

hsl(81, 53%, 86%)

HSB

hsb(81, 16%, 93%)

CMYK

cmyk(5%, 0%, 16%, 7%)

Oklch

oklch(93.0% 0.052 122.8)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

808E7F

8D808E

Analogous

888E80

808E7F

808E86

Triadic

808E7F

80818E

8E8081

Split-Comp.

808E7F

86808E

8E8088

Tetradic

808E7F

80888E

8D808E

8E8680

Contrast Matrix WCAG 2.1 Contrast

808E7F	F6A313	B7CA9C	C4D9A5	E1EEC8
—	1.7 Fail	2.0 Fail	2.3 Fail	2.8 Fail
1.7 Fail	—	1.2 Fail	1.4 Fail	1.7 Fail
2.0 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
2.3 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
2.8 Fail	1.7 Fail	1.4 Fail	1.2 Fail	—

White BG

3.4AA Large

2.1Fail

1.8Fail

1.5Fail

1.2Fail

Black BG

6.1AA

10.2AAA

11.9AAA

13.8AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

868683

D2D136

BFBFA7

CDCDB2

E7E7D1

Deuteranopia

858484

D7DD3E

BEBDAA

CCCAB5

E6E5D3

Tritanopia

818586

F25157

B8B0B2

C5BCBE

E2D8DA

Achromatopsia

888888

ABABAB

BFBFBF

CDCDCD

E6E6E6

Shades & Tints Shades & Tints

#808E7F

Dark

Light

#F6A313

Dark

Light

#B7CA9C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #808e7f;
  --color-2: #f6a313;
  --color-3: #b7ca9c;
  --color-4: #c4d9a5;
  --color-5: #e1eec8;
}

SCSS

$color-1: #808e7f;
$color-2: #f6a313;
$color-3: #b7ca9c;
$color-4: #c4d9a5;
$color-5: #e1eec8;

TAILWIND

colors: {
  'brand-1': '#808e7f',
  'brand-2': '#f6a313',
  'brand-3': '#b7ca9c',
  'brand-4': '#c4d9a5',
  'brand-5': '#e1eec8',
}

RGB Array

[128, 142, 127], [246, 163, 19], [183, 202, 156], [196, 217, 165], [225, 238, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #808E7F, #F6A313, #B7CA9C, #C4D9A5, #E1EEC8 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: #808e7f; --color-2: #f6a313; --color-3: #b7ca9c; --color-4: #c4d9a5; --color-5: #e1eec8. 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