← Back to Editor

#AFA689 · #A9A17C · #98997A · #7EC2AB · #8ABD9E

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

#AFA689

Ginger · DarkGray · Sunflower

HEX
#AFA689
RGB
rgb(175, 166, 137)
HSL
hsl(46, 19%, 61%)
HSB
hsb(46, 22%, 69%)
CMYK
cmyk(0%, 5%, 22%, 31%)
Oklch
oklch(72.5% 0.042 92.8)

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

#A9A17C

Ginger · DarkSeaGreen · Sunflower

HEX
#A9A17C
RGB
rgb(169, 161, 124)
HSL
hsl(49, 21%, 57%)
HSB
hsb(49, 27%, 66%)
CMYK
cmyk(0%, 5%, 27%, 34%)
Oklch
oklch(70.6% 0.052 97.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#98997A

Autumn Sage · Gray · Sunflower

HEX
#98997A
RGB
rgb(152, 153, 122)
HSL
hsl(62, 13%, 54%)
HSB
hsb(62, 20%, 60%)
CMYK
cmyk(1%, 0%, 20%, 40%)
Oklch
oklch(67.4% 0.044 109.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#7EC2AB

Jade · MediumAquaMarine · Lake Green

HEX
#7EC2AB
RGB
rgb(126, 194, 171)
HSL
hsl(160, 36%, 63%)
HSB
hsb(160, 35%, 76%)
CMYK
cmyk(35%, 0%, 12%, 24%)
Oklch
oklch(76.2% 0.077 170.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#8ABD9E

Celadon · DarkSeaGreen · Apple Green

HEX
#8ABD9E
RGB
rgb(138, 189, 158)
HSL
hsl(144, 28%, 64%)
HSB
hsb(144, 27%, 74%)
CMYK
cmyk(27%, 0%, 16%, 26%)
Oklch
oklch(75.4% 0.070 157.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFA689
8991AE

Analogous

AE9389
AFA689
A4AE89

Triadic

AFA689
89AEA6
A689AE

Split-Comp.

AFA689
89A4AE
9389AE

Tetradic

AFA689
89AE93
8991AE
AE89A4

Contrast Matrix WCAG 2.1 Contrast

AFA689
A9A17C
98997A
7EC2AB
8ABD9E
—
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.4
Fail
1.4
Fail
1.2
Fail
1.3
Fail
1.4
Fail
—
1.0
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.0
Fail
—
White BG
2.4Fail
2.6Fail
2.9Fail
2.1Fail
2.1Fail
Black BG
8.6AAA
8.1AAA
7.2AAA
10.2AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAB90
A6A585
989882
9B9CB1
A0A1A6

Deuteranopia

ACAC92
A6A787
989883
9892B2
9D99A7

Tritanopia

AF9697
A98C8E
988789
81B5B6
8DABAD

Achromatopsia

A5A5A5
9F9F9F
959595
ABABAB
AAAAAA

Shades & Tints Shades & Tints

#AFA689

Dark
Light

#A9A17C

Dark
Light

#98997A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afa689;
  --color-2: #a9a17c;
  --color-3: #98997a;
  --color-4: #7ec2ab;
  --color-5: #8abd9e;
}

SCSS

$color-1: #afa689;
$color-2: #a9a17c;
$color-3: #98997a;
$color-4: #7ec2ab;
$color-5: #8abd9e;

TAILWIND

colors: {
  'brand-1': '#afa689',
  'brand-2': '#a9a17c',
  'brand-3': '#98997a',
  'brand-4': '#7ec2ab',
  'brand-5': '#8abd9e',
}

RGB Array

[175, 166, 137], [169, 161, 124], [152, 153, 122], [126, 194, 171], [138, 189, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFA689, #A9A17C, #98997A, #7EC2AB, #8ABD9E 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: #afa689; --color-2: #a9a17c; --color-3: #98997a; --color-4: #7ec2ab; --color-5: #8abd9e. 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