← Back to Editor

#AFA899 · #7C836C · #8D847C · #E9D9CB · #DFD8D3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFA899

Ginger · DarkGray · Sunflower

HEX
#AFA899
RGB
rgb(175, 168, 153)
HSL
hsl(41, 12%, 64%)
HSB
hsb(41, 13%, 69%)
CMYK
cmyk(0%, 4%, 13%, 31%)
Oklch
oklch(73.3% 0.023 86.0)

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

#7C836C

Grass Green · Gray · Olive Green

HEX
#7C836C
RGB
rgb(124, 131, 108)
HSL
hsl(78, 10%, 47%)
HSB
hsb(78, 18%, 51%)
CMYK
cmyk(5%, 0%, 18%, 49%)
Oklch
oklch(59.7% 0.035 121.2)

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

#8D847C

Ash · Gray · Warm Gray

HEX
#8D847C
RGB
rgb(141, 132, 124)
HSL
hsl(28, 7%, 52%)
HSB
hsb(28, 12%, 55%)
CMYK
cmyk(0%, 6%, 12%, 45%)
Oklch
oklch(61.9% 0.016 64.2)

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

#E9D9CB

Apricot · LightGray · Peach Orange

HEX
#E9D9CB
RGB
rgb(233, 217, 203)
HSL
hsl(28, 41%, 85%)
HSB
hsb(28, 13%, 91%)
CMYK
cmyk(0%, 7%, 13%, 9%)
Oklch
oklch(89.4% 0.026 63.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#DFD8D3

Apricot · LightGray · Peach Orange

HEX
#DFD8D3
RGB
rgb(223, 216, 211)
HSL
hsl(25, 16%, 85%)
HSB
hsb(25, 5%, 87%)
CMYK
cmyk(0%, 3%, 5%, 13%)
Oklch
oklch(88.6% 0.010 58.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFA899
989FAE

Analogous

AE9C98
AFA899
AAAE98

Triadic

AFA899
98AEA7
A798AE

Split-Comp.

AFA899
98AAAE
9C98AE

Tetradic

AFA899
98AE9C
989FAE
AE98AA

Contrast Matrix WCAG 2.1 Contrast

AFA899
7C836C
8D847C
E9D9CB
DFD8D3
—
1.7
Fail
1.6
Fail
1.7
Fail
1.7
Fail
1.7
Fail
—
1.1
Fail
2.9
Fail
2.8
Fail
1.6
Fail
1.1
Fail
—
2.7
Fail
2.6
Fail
1.7
Fail
2.9
Fail
2.7
Fail
—
1.0
Fail
1.7
Fail
2.8
Fail
2.6
Fail
1.0
Fail
—
White BG
2.4Fail
3.9AA Large
3.7AA Large
1.4Fail
1.4Fail
Black BG
8.9AAA
5.3AA
5.7AA
15.3AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC9D
7F7F72
89897E
E2E2CE
DCDCD4

Deuteranopia

ACAD9E
7F7E73
8A8A7E
E3E4CF
DCDDD5

Tritanopia

AF9FA0
7C7677
8D7F80
E8D1D2
DFD5D5

Achromatopsia

A8A8A8
7E7E7E
868686
DCDCDC
DADADA

Shades & Tints Shades & Tints

#AFA899

Dark
Light

#7C836C

Dark
Light

#8D847C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afa899;
  --color-2: #7c836c;
  --color-3: #8d847c;
  --color-4: #e9d9cb;
  --color-5: #dfd8d3;
}

SCSS

$color-1: #afa899;
$color-2: #7c836c;
$color-3: #8d847c;
$color-4: #e9d9cb;
$color-5: #dfd8d3;

TAILWIND

colors: {
  'brand-1': '#afa899',
  'brand-2': '#7c836c',
  'brand-3': '#8d847c',
  'brand-4': '#e9d9cb',
  'brand-5': '#dfd8d3',
}

RGB Array

[175, 168, 153], [124, 131, 108], [141, 132, 124], [233, 217, 203], [223, 216, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFA899, #7C836C, #8D847C, #E9D9CB, #DFD8D3 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. 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: #afa899; --color-2: #7c836c; --color-3: #8d847c; --color-4: #e9d9cb; --color-5: #dfd8d3. 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 beauty, lifestyle, arts 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