← Back to Editor

#AFAC8D · #C4B795 · #9CAA87 · #859F96 · #778C91

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AFAC8D

Fresh Green · DarkGray · Sunflower

HEX
#AFAC8D
RGB
rgb(175, 172, 141)
HSL
hsl(55, 18%, 62%)
HSB
hsb(55, 19%, 69%)
CMYK
cmyk(0%, 2%, 19%, 31%)
Oklch
oklch(73.9% 0.043 102.8)

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

#C4B795

Ginger · Tan · Sunflower

HEX
#C4B795
RGB
rgb(196, 183, 149)
HSL
hsl(43, 28%, 68%)
HSB
hsb(43, 24%, 77%)
CMYK
cmyk(0%, 7%, 24%, 23%)
Oklch
oklch(78.2% 0.048 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#9CAA87

Grass Green · DarkSeaGreen · Olive Green

HEX
#9CAA87
RGB
rgb(156, 170, 135)
HSL
hsl(84, 17%, 60%)
HSB
hsb(84, 21%, 67%)
CMYK
cmyk(8%, 0%, 21%, 33%)
Oklch
oklch(71.7% 0.052 125.4)

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

#859F96

Mineral Blue · LightSlateGray · Olive Green

HEX
#859F96
RGB
rgb(133, 159, 150)
HSL
hsl(159, 12%, 57%)
HSB
hsb(159, 16%, 62%)
CMYK
cmyk(16%, 0%, 6%, 38%)
Oklch
oklch(68.0% 0.032 172.4)

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

#778C91

Slate Blue · LightSlateGray · Lake Green

HEX
#778C91
RGB
rgb(119, 140, 145)
HSL
hsl(192, 11%, 52%)
HSB
hsb(192, 18%, 57%)
CMYK
cmyk(18%, 3%, 0%, 43%)
Oklch
oklch(62.5% 0.025 213.7)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFAC8D
8D90B0

Analogous

B09B8D
AFAC8D
A1B08D

Triadic

AFAC8D
8DB0AD
AD8DB0

Split-Comp.

AFAC8D
8DA1B0
9B8DB0

Tetradic

AFAC8D
8DB09B
8D90B0
B08DA1

Contrast Matrix WCAG 2.1 Contrast

AFAC8D
C4B795
9CAA87
859F96
778C91
—
1.2
Fail
1.1
Fail
1.2
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.8
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
White BG
2.3Fail
2.0Fail
2.5Fail
2.8Fail
3.5AA Large
Black BG
9.1AAA
10.6AAA
8.5AAA
7.4AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAE95
BEBE9D
A2A28F
909098
808090

Deuteranopia

AEAE96
BFC09F
A1A092
8F8D99
7F7D90

Tritanopia

AF9A9C
C3A4A5
9D9698
869A9A
788F8F

Achromatopsia

A9A9A9
B7B7B7
A2A2A2
969696
868686

Shades & Tints Shades & Tints

#AFAC8D

Dark
Light

#C4B795

Dark
Light

#9CAA87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afac8d;
  --color-2: #c4b795;
  --color-3: #9caa87;
  --color-4: #859f96;
  --color-5: #778c91;
}

SCSS

$color-1: #afac8d;
$color-2: #c4b795;
$color-3: #9caa87;
$color-4: #859f96;
$color-5: #778c91;

TAILWIND

colors: {
  'brand-1': '#afac8d',
  'brand-2': '#c4b795',
  'brand-3': '#9caa87',
  'brand-4': '#859f96',
  'brand-5': '#778c91',
}

RGB Array

[175, 172, 141], [196, 183, 149], [156, 170, 135], [133, 159, 150], [119, 140, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFAC8D, #C4B795, #9CAA87, #859F96, #778C91 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: #afac8d; --color-2: #c4b795; --color-3: #9caa87; --color-4: #859f96; --color-5: #778c91. 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