← Back to Editor

#5C4053 · #68736E · #669178 · #9BA485 · #CCA987

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

#5C4053

Rose Purple · DarkSlateGray · Eggplant

HEX
#5C4053
RGB
rgb(92, 64, 83)
HSL
hsl(319, 18%, 31%)
HSB
hsb(319, 30%, 36%)
CMYK
cmyk(0%, 30%, 10%, 64%)
Oklch
oklch(41.0% 0.048 338.9)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#68736E

Ink Gray · DimGray · Warm Gray

HEX
#68736E
RGB
rgb(104, 115, 110)
HSL
hsl(153, 5%, 43%)
HSB
hsb(153, 10%, 45%)
CMYK
cmyk(10%, 0%, 4%, 55%)
Oklch
oklch(54.5% 0.015 166.8)

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

#669178

Celadon · SlateGray · Olive Green

HEX
#669178
RGB
rgb(102, 145, 120)
HSL
hsl(145, 17%, 48%)
HSB
hsb(145, 30%, 57%)
CMYK
cmyk(30%, 0%, 17%, 43%)
Oklch
oklch(61.8% 0.061 158.5)

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

#9BA485

Grass Green · DarkSeaGreen · Olive Green

HEX
#9BA485
RGB
rgb(155, 164, 133)
HSL
hsl(77, 15%, 58%)
HSB
hsb(77, 19%, 64%)
CMYK
cmyk(5%, 0%, 19%, 36%)
Oklch
oklch(70.3% 0.045 120.7)

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

#CCA987

Ginger · Tan · Warm Sun

HEX
#CCA987
RGB
rgb(204, 169, 135)
HSL
hsl(30, 40%, 66%)
HSB
hsb(30, 34%, 80%)
CMYK
cmyk(0%, 17%, 34%, 20%)
Oklch
oklch(75.8% 0.062 65.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C4053
415D4A

Analogous

58415D
5C4053
5D4146

Triadic

5C4053
545D41
41545D

Split-Comp.

5C4053
465D41
415D58

Tetradic

5C4053
5D5841
415D4A
41465D

Contrast Matrix WCAG 2.1 Contrast

5C4053
68736E
669178
9BA485
CCA987
—
1.8
Fail
2.5
Fail
3.5
AA Large
4.1
AA Large
1.8
Fail
—
1.4
Fail
1.9
Fail
2.2
Fail
2.5
Fail
1.4
Fail
—
1.4
Fail
1.6
Fail
3.5
AA Large
1.9
Fail
1.4
Fail
—
1.2
Fail
4.1
AA Large
2.2
Fail
1.6
Fail
1.2
Fail
—
White BG
9.1AAA
4.9AA
3.6AA Large
2.6Fail
2.2Fail
Black BG
2.3Fail
4.3AA Large
5.9AA
8.0AAA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

50504E
6D6D6F
79797E
9F9F8D
BDBD8F

Deuteranopia

52544D
6C6B70
767380
9E9E8E
BFC191

Tritanopia

5B4B4A
697070
688384
9B9294
CA9697

Achromatopsia

4B4B4B
6F6F6F
818181
9E9E9E
B0B0B0

Shades & Tints Shades & Tints

#5C4053

Dark
Light

#68736E

Dark
Light

#669178

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c4053;
  --color-2: #68736e;
  --color-3: #669178;
  --color-4: #9ba485;
  --color-5: #cca987;
}

SCSS

$color-1: #5c4053;
$color-2: #68736e;
$color-3: #669178;
$color-4: #9ba485;
$color-5: #cca987;

TAILWIND

colors: {
  'brand-1': '#5c4053',
  'brand-2': '#68736e',
  'brand-3': '#669178',
  'brand-4': '#9ba485',
  'brand-5': '#cca987',
}

RGB Array

[92, 64, 83], [104, 115, 110], [102, 145, 120], [155, 164, 133], [204, 169, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C4053, #68736E, #669178, #9BA485, #CCA987 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: #5c4053; --color-2: #68736e; --color-3: #669178; --color-4: #9ba485; --color-5: #cca987. 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