#8C947F + #7FA186 + #71AE8E + #63BB95 + #CF002F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8C947F

Grass Green · Gray · Warm Gray

HEX

#8C947F

RGB

rgb(140, 148, 127)

HSL

hsl(83, 9%, 54%)

HSB

hsb(83, 14%, 58%)

CMYK

cmyk(5%, 0%, 14%, 42%)

Oklch

oklch(65.4% 0.032 124.3)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

#7FA186

Celadon · LightSlateGray · Olive Green

HEX

#7FA186

RGB

rgb(127, 161, 134)

HSL

hsl(132, 15%, 56%)

HSB

hsb(132, 21%, 63%)

CMYK

cmyk(21%, 0%, 17%, 37%)

Oklch

oklch(67.6% 0.055 150.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#71AE8E

Celadon · CadetBlue · Olive Green

HEX

#71AE8E

RGB

rgb(113, 174, 142)

HSL

hsl(149, 27%, 56%)

HSB

hsb(149, 35%, 68%)

CMYK

cmyk(35%, 0%, 18%, 32%)

Oklch

oklch(70.0% 0.079 160.5)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#63BB95

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#63BB95

RGB

rgb(99, 187, 149)

HSL

hsl(154, 39%, 56%)

HSB

hsb(154, 47%, 73%)

CMYK

cmyk(47%, 0%, 20%, 27%)

Oklch

oklch(72.6% 0.103 163.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#CF002F

Vermilion · Crimson · Passion Red

HEX

#CF002F

RGB

rgb(207, 0, 47)

HSL

hsl(346, 100%, 41%)

HSB

hsb(346, 100%, 81%)

CMYK

cmyk(0%, 100%, 77%, 19%)

Oklch

oklch(54.0% 0.217 21.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C947F

877F94

Analogous

94927F

8C947F

82947F

Triadic

8C947F

7F8C94

947F8C

Split-Comp.

8C947F

7F8294

927F94

Tetradic

8C947F

7F9492

877F94

947F82

Contrast Matrix WCAG 2.1 Contrast

8C947F	7FA186	71AE8E	63BB95	CF002F
—	1.1 Fail	1.2 Fail	1.4 Fail	1.8 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	2.0 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	2.2 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	2.5 Fail
1.8 Fail	2.0 Fail	2.2 Fail	2.5 Fail	—

White BG

3.2AA Large

2.9Fail

2.6Fail

2.3Fail

5.7AA

Black BG

6.7AA

7.3AAA

8.1AAA

9.1AAA

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F9084

8E8E8D

8B8C96

898A9E

757424

Deuteranopia

8F8E85

8C898E

888398

847DA0

819121

Tritanopia

8C8889

819293

749C9D

67A5A7

C51B19

Achromatopsia

8F8F8F

949494

989898

9C9C9C

434343

Shades & Tints Shades & Tints

#8C947F

Dark

Light

#7FA186

Dark

Light

#71AE8E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c947f;
  --color-2: #7fa186;
  --color-3: #71ae8e;
  --color-4: #63bb95;
  --color-5: #cf002f;
}

SCSS

$color-1: #8c947f;
$color-2: #7fa186;
$color-3: #71ae8e;
$color-4: #63bb95;
$color-5: #cf002f;

TAILWIND

colors: {
  'brand-1': '#8c947f',
  'brand-2': '#7fa186',
  'brand-3': '#71ae8e',
  'brand-4': '#63bb95',
  'brand-5': '#cf002f',
}

RGB Array

[140, 148, 127], [127, 161, 134], [113, 174, 142], [99, 187, 149], [207, 0, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C947F, #7FA186, #71AE8E, #63BB95, #CF002F is ideal for: corporate websites, product showcases, portfolios. 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: #8c947f; --color-2: #7fa186; --color-3: #71ae8e; --color-4: #63bb95; --color-5: #cf002f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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