← Back to Editor

#87747F · #7A9685 · #A19D78 · #CCA478 · #F29F6F

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

#87747F

Rose Purple · Gray · Warm Gray

HEX
#87747F
RGB
rgb(135, 116, 127)
HSL
hsl(325, 8%, 49%)
HSB
hsb(325, 14%, 53%)
CMYK
cmyk(0%, 14%, 6%, 47%)
Oklch
oklch(58.0% 0.028 342.3)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#7A9685

Celadon · Gray · Olive Green

HEX
#7A9685
RGB
rgb(122, 150, 133)
HSL
hsl(144, 12%, 53%)
HSB
hsb(144, 19%, 59%)
CMYK
cmyk(19%, 0%, 11%, 41%)
Oklch
oklch(64.7% 0.040 158.4)

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

#A19D78

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A19D78
RGB
rgb(161, 157, 120)
HSL
hsl(54, 18%, 55%)
HSB
hsb(54, 25%, 63%)
CMYK
cmyk(0%, 2%, 25%, 37%)
Oklch
oklch(69.0% 0.052 102.5)

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

#CCA478

Ginger · Tan · Warm Sun

HEX
#CCA478
RGB
rgb(204, 164, 120)
HSL
hsl(31, 45%, 64%)
HSB
hsb(31, 41%, 80%)
CMYK
cmyk(0%, 20%, 41%, 20%)
Oklch
oklch(74.5% 0.076 68.9)

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

#F29F6F

Apricot · SandyBrown · Warm Sun

HEX
#F29F6F
RGB
rgb(242, 159, 111)
HSL
hsl(22, 83%, 69%)
HSB
hsb(22, 54%, 95%)
CMYK
cmyk(0%, 34%, 54%, 5%)
Oklch
oklch(77.5% 0.118 50.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87747F
73877B

Analogous

857387
87747F
877375

Triadic

87747F
7F8773
737F87

Split-Comp.

87747F
758773
738785

Tetradic

87747F
878573
73877B
737587

Contrast Matrix WCAG 2.1 Contrast

87747F
7A9685
A19D78
CCA478
F29F6F
—
1.4
Fail
1.6
Fail
1.9
Fail
2.1
Fail
1.4
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.9
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
2.1
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
4.3AA Large
3.2AA Large
2.8Fail
2.3Fail
2.1Fail
Black BG
4.8AA
6.5AA
7.6AAA
9.1AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7F7C
868689
9F9F81
BBBA83
CECD7B

Deuteranopia

80817C
85828A
A0A083
BDC085
D3D97D

Tritanopia

867A7A
7B8C8D
A1888A
CA8B8D
EE8486

Achromatopsia

7B7B7B
8C8C8C
9A9A9A
ABABAB
B2B2B2

Shades & Tints Shades & Tints

#87747F

Dark
Light

#7A9685

Dark
Light

#A19D78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87747f;
  --color-2: #7a9685;
  --color-3: #a19d78;
  --color-4: #cca478;
  --color-5: #f29f6f;
}

SCSS

$color-1: #87747f;
$color-2: #7a9685;
$color-3: #a19d78;
$color-4: #cca478;
$color-5: #f29f6f;

TAILWIND

colors: {
  'brand-1': '#87747f',
  'brand-2': '#7a9685',
  'brand-3': '#a19d78',
  'brand-4': '#cca478',
  'brand-5': '#f29f6f',
}

RGB Array

[135, 116, 127], [122, 150, 133], [161, 157, 120], [204, 164, 120], [242, 159, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87747F, #7A9685, #A19D78, #CCA478, #F29F6F 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: #87747f; --color-2: #7a9685; --color-3: #a19d78; --color-4: #cca478; --color-5: #f29f6f. 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