← Back to Editor

#5A5655 · #904157 · #C64653 · #919D55 · #C5AC6C

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

#5A5655

Ink Gray · DimGray · Charcoal

HEX
#5A5655
RGB
rgb(90, 86, 85)
HSL
hsl(12, 3%, 34%)
HSB
hsb(12, 6%, 35%)
CMYK
cmyk(0%, 4%, 6%, 65%)
Oklch
oklch(45.7% 0.005 34.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#904157

Dark Violet · Sienna · Camellia

HEX
#904157
RGB
rgb(144, 65, 87)
HSL
hsl(343, 38%, 41%)
HSB
hsb(343, 55%, 56%)
CMYK
cmyk(0%, 55%, 40%, 44%)
Oklch
oklch(48.4% 0.109 4.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#C64653

Crimson · Sienna · Passion Red

HEX
#C64653
RGB
rgb(198, 70, 83)
HSL
hsl(354, 53%, 53%)
HSB
hsb(354, 65%, 78%)
CMYK
cmyk(0%, 65%, 58%, 22%)
Oklch
oklch(57.4% 0.163 18.0)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#919D55

Grass Green · Gray · Olive Green

HEX
#919D55
RGB
rgb(145, 157, 85)
HSL
hsl(70, 30%, 47%)
HSB
hsb(70, 46%, 62%)
CMYK
cmyk(8%, 0%, 46%, 38%)
Oklch
oklch(67.0% 0.097 116.9)

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

#C5AC6C

Ginger · Tan · Sunflower

HEX
#C5AC6C
RGB
rgb(197, 172, 108)
HSL
hsl(43, 43%, 60%)
HSB
hsb(43, 45%, 77%)
CMYK
cmyk(0%, 13%, 45%, 23%)
Oklch
oklch(75.2% 0.088 88.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A5655
545859

Analogous

595456
5A5655
595854

Triadic

5A5655
545955
555459

Split-Comp.

5A5655
545958
545659

Tetradic

5A5655
565954
545859
585459

Contrast Matrix WCAG 2.1 Contrast

5A5655
904157
C64653
919D55
C5AC6C
—
1.1
Fail
1.5
Fail
2.5
Fail
3.3
AA Large
1.1
Fail
—
1.4
Fail
2.3
Fail
3.1
AA Large
1.5
Fail
1.4
Fail
—
1.6
Fail
2.2
Fail
2.5
Fail
2.3
Fail
1.6
Fail
—
1.3
Fail
3.3
AA Large
3.1
AA Large
2.2
Fail
1.3
Fail
—
White BG
7.2AAA
6.8AA
4.8AA
2.9Fail
2.2Fail
Black BG
2.9Fail
3.1AA Large
4.4AA Large
7.2AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

585855
6E6D52
8F8D50
969666
BABA7B

Deuteranopia

595955
727850
96A04F
96956B
BCBD7F

Tritanopia

5A5555
8C4D4D
C04D4D
927477
C4888A

Achromatopsia

575757
5B5B5B
6E6E6E
919191
ACACAC

Shades & Tints Shades & Tints

#5A5655

Dark
Light

#904157

Dark
Light

#C64653

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a5655;
  --color-2: #904157;
  --color-3: #c64653;
  --color-4: #919d55;
  --color-5: #c5ac6c;
}

SCSS

$color-1: #5a5655;
$color-2: #904157;
$color-3: #c64653;
$color-4: #919d55;
$color-5: #c5ac6c;

TAILWIND

colors: {
  'brand-1': '#5a5655',
  'brand-2': '#904157',
  'brand-3': '#c64653',
  'brand-4': '#919d55',
  'brand-5': '#c5ac6c',
}

RGB Array

[90, 86, 85], [144, 65, 87], [198, 70, 83], [145, 157, 85], [197, 172, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A5655, #904157, #C64653, #919D55, #C5AC6C 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: #5a5655; --color-2: #904157; --color-3: #c64653; --color-4: #919d55; --color-5: #c5ac6c. 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