← Back to Editor

#8FB69B · #76A183 · #859578 · #9C7674 · #AF9D9A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8FB69B

Celadon · DarkSeaGreen · Apple Green

HEX
#8FB69B
RGB
rgb(143, 182, 155)
HSL
hsl(138, 21%, 64%)
HSB
hsb(138, 21%, 71%)
CMYK
cmyk(21%, 0%, 15%, 29%)
Oklch
oklch(74.0% 0.057 154.6)

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

#76A183

Celadon · LightSlateGray · Olive Green

HEX
#76A183
RGB
rgb(118, 161, 131)
HSL
hsl(138, 19%, 55%)
HSB
hsb(138, 27%, 63%)
CMYK
cmyk(27%, 0%, 19%, 37%)
Oklch
oklch(66.9% 0.064 154.0)

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

#859578

Celadon · Gray · Olive Green

HEX
#859578
RGB
rgb(133, 149, 120)
HSL
hsl(93, 12%, 53%)
HSB
hsb(93, 19%, 58%)
CMYK
cmyk(11%, 0%, 19%, 42%)
Oklch
oklch(64.9% 0.046 131.2)

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

#9C7674

Crimson · Gray · Passion Red

HEX
#9C7674
RGB
rgb(156, 118, 116)
HSL
hsl(3, 17%, 53%)
HSB
hsb(3, 26%, 61%)
CMYK
cmyk(0%, 24%, 26%, 39%)
Oklch
oklch(60.3% 0.048 22.0)

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

#AF9D9A

Peach Pink · DarkGray · Coral Red

HEX
#AF9D9A
RGB
rgb(175, 157, 154)
HSL
hsl(9, 12%, 65%)
HSB
hsb(9, 12%, 69%)
CMYK
cmyk(0%, 10%, 12%, 31%)
Oklch
oklch(71.1% 0.022 29.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FB69B
B690AB

Analogous

98B690
8FB69B
90B6AF

Triadic

8FB69B
9B90B6
B69B90

Split-Comp.

8FB69B
AF90B6
B69098

Tetradic

8FB69B
9098B6
B690AB
B6AF90

Contrast Matrix WCAG 2.1 Contrast

8FB69B
76A183
859578
9C7674
AF9D9A
—
1.3
Fail
1.4
Fail
1.8
Fail
1.2
Fail
1.3
Fail
—
1.1
Fail
1.4
Fail
1.1
Fail
1.4
Fail
1.1
Fail
—
1.2
Fail
1.2
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.5
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.5
Fail
—
White BG
2.3Fail
2.9Fail
3.2AA Large
4.0AA Large
2.6Fail
Black BG
9.3AAA
7.2AAA
6.6AA
5.3AA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A0A2
89898A
8C8C7F
8C8B74
A7A79B

Deuteranopia

9E9BA3
86838C
8B8A81
8E9175
A8AA9B

Tritanopia

91A7A8
789091
868586
9A7575
AE9B9B

Achromatopsia

A7A7A7
919191
8D8D8D
818181
A2A2A2

Shades & Tints Shades & Tints

#8FB69B

Dark
Light

#76A183

Dark
Light

#859578

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fb69b;
  --color-2: #76a183;
  --color-3: #859578;
  --color-4: #9c7674;
  --color-5: #af9d9a;
}

SCSS

$color-1: #8fb69b;
$color-2: #76a183;
$color-3: #859578;
$color-4: #9c7674;
$color-5: #af9d9a;

TAILWIND

colors: {
  'brand-1': '#8fb69b',
  'brand-2': '#76a183',
  'brand-3': '#859578',
  'brand-4': '#9c7674',
  'brand-5': '#af9d9a',
}

RGB Array

[143, 182, 155], [118, 161, 131], [133, 149, 120], [156, 118, 116], [175, 157, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8FB69B, #76A183, #859578, #9C7674, #AF9D9A is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8fb69b; --color-2: #76a183; --color-3: #859578; --color-4: #9c7674; --color-5: #af9d9a. 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. Restrained colors convey professionalism and trust. 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