← Back to Editor

#8F8281 · #C0A095 · #CFB74A · #D1C97D · #E3D2C1

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

#8F8281

Ash · Gray · Warm Gray

HEX
#8F8281
RGB
rgb(143, 130, 129)
HSL
hsl(4, 6%, 53%)
HSB
hsb(4, 10%, 56%)
CMYK
cmyk(0%, 9%, 10%, 44%)
Oklch
oklch(61.8% 0.016 22.9)

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

#C0A095

Apricot · Tan · Warm Sun

HEX
#C0A095
RGB
rgb(192, 160, 149)
HSL
hsl(15, 25%, 67%)
HSB
hsb(15, 22%, 75%)
CMYK
cmyk(0%, 17%, 22%, 25%)
Oklch
oklch(73.1% 0.041 39.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CFB74A

Ginger · GoldenRod · Sunflower

HEX
#CFB74A
RGB
rgb(207, 183, 74)
HSL
hsl(49, 58%, 55%)
HSB
hsb(49, 64%, 81%)
CMYK
cmyk(0%, 12%, 64%, 19%)
Oklch
oklch(78.0% 0.130 96.8)

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

#D1C97D

Fresh Green · BurlyWood · Sunflower

HEX
#D1C97D
RGB
rgb(209, 201, 125)
HSL
hsl(54, 48%, 65%)
HSB
hsb(54, 40%, 82%)
CMYK
cmyk(0%, 4%, 40%, 18%)
Oklch
oklch(82.5% 0.097 103.1)

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

#E3D2C1

Goose Yellow · LightGray · Peach Orange

HEX
#E3D2C1
RGB
rgb(227, 210, 193)
HSL
hsl(30, 38%, 82%)
HSB
hsb(30, 15%, 89%)
CMYK
cmyk(0%, 7%, 15%, 11%)
Oklch
oklch(87.3% 0.030 67.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F8281
808D8E

Analogous

8E8086
8F8281
8E8880

Triadic

8F8281
808E81
81808E

Split-Comp.

8F8281
808E88
80868E

Tetradic

8F8281
868E80
808D8E
88808E

Contrast Matrix WCAG 2.1 Contrast

8F8281
C0A095
CFB74A
D1C97D
E3D2C1
—
1.5
Fail
1.9
Fail
2.2
Fail
2.5
Fail
1.5
Fail
—
1.2
Fail
1.4
Fail
1.6
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
2.2
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
2.5
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
3.7AA Large
2.4Fail
2.0Fail
1.7Fail
1.5Fail
Black BG
5.7AA
8.7AAA
10.5AAA
12.4AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898981
B2B298
C5C464
CECD8F
DCDBC5

Deuteranopia

8A8B81
B4B698
C6C86B
CECF94
DDDEC6

Tritanopia

8E8181
BE9A9A
CE797E
D19EA1
E2C8C9

Achromatopsia

868686
A8A8A8
B2B2B2
C3C3C3
D5D5D5

Shades & Tints Shades & Tints

#8F8281

Dark
Light

#C0A095

Dark
Light

#CFB74A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f8281;
  --color-2: #c0a095;
  --color-3: #cfb74a;
  --color-4: #d1c97d;
  --color-5: #e3d2c1;
}

SCSS

$color-1: #8f8281;
$color-2: #c0a095;
$color-3: #cfb74a;
$color-4: #d1c97d;
$color-5: #e3d2c1;

TAILWIND

colors: {
  'brand-1': '#8f8281',
  'brand-2': '#c0a095',
  'brand-3': '#cfb74a',
  'brand-4': '#d1c97d',
  'brand-5': '#e3d2c1',
}

RGB Array

[143, 130, 129], [192, 160, 149], [207, 183, 74], [209, 201, 125], [227, 210, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F8281, #C0A095, #CFB74A, #D1C97D, #E3D2C1 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: #8f8281; --color-2: #c0a095; --color-3: #cfb74a; --color-4: #d1c97d; --color-5: #e3d2c1. 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