← Back to Editor

#5F5D44 · #77358F · #94151E · #CB283B · #F7C161

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

#5F5D44

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#5F5D44
RGB
rgb(95, 93, 68)
HSL
hsl(56, 17%, 32%)
HSB
hsb(56, 28%, 37%)
CMYK
cmyk(0%, 2%, 28%, 63%)
Oklch
oklch(47.3% 0.038 103.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#77358F

Dark Plum · DarkSlateBlue · Eggplant

HEX
#77358F
RGB
rgb(119, 53, 143)
HSL
hsl(284, 46%, 38%)
HSB
hsb(284, 63%, 56%)
CMYK
cmyk(17%, 63%, 0%, 44%)
Oklch
oklch(45.8% 0.152 316.0)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#94151E

Vermilion · Brown · Wine Red

HEX
#94151E
RGB
rgb(148, 21, 30)
HSL
hsl(356, 75%, 33%)
HSB
hsb(356, 86%, 58%)
CMYK
cmyk(0%, 86%, 80%, 42%)
Oklch
oklch(43.0% 0.160 24.5)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#CB283B

Vermilion · Crimson · Passion Red

HEX
#CB283B
RGB
rgb(203, 40, 59)
HSL
hsl(353, 67%, 48%)
HSB
hsb(353, 80%, 80%)
CMYK
cmyk(0%, 80%, 71%, 20%)
Oklch
oklch(55.0% 0.197 21.2)

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

#F7C161

Ginger · SandyBrown · Warm Sun

HEX
#F7C161
RGB
rgb(247, 193, 97)
HSL
hsl(38, 90%, 67%)
HSB
hsb(38, 61%, 97%)
CMYK
cmyk(0%, 22%, 61%, 3%)
Oklch
oklch(84.1% 0.129 79.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F5D44
44465F

Analogous

5F5044
5F5D44
535F44

Triadic

5F5D44
445F5E
5E445F

Split-Comp.

5F5D44
44535F
50445F

Tetradic

5F5D44
445F50
44465F
5F4453

Contrast Matrix WCAG 2.1 Contrast

5F5D44
77358F
94151E
CB283B
F7C161
—
1.2
Fail
1.3
Fail
1.2
Fail
4.1
AA Large
1.2
Fail
—
1.1
Fail
1.5
Fail
4.7
AA
1.3
Fail
1.1
Fail
—
1.6
Fail
5.3
AA
1.2
Fail
1.5
Fail
1.6
Fail
—
3.3
AA Large
4.1
AA Large
4.7
AA
5.3
AA
3.3
AA Large
—
White BG
6.7AA
7.8AAA
8.8AAA
5.4AA
1.6Fail
Black BG
3.1AA Large
2.7Fail
2.4Fail
3.9AA Large
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E4A
5A5A79
5D5C1C
848336
E0DF78

Deuteranopia

5E5E4C
5E6374
646E1B
8E9A35
E3E77E

Tritanopia

5F4F50
746864
8E1A1A
C33332
F48B8F

Achromatopsia

5B5B5B
535353
3C3C3C
5B5B5B
C6C6C6

Shades & Tints Shades & Tints

#5F5D44

Dark
Light

#77358F

Dark
Light

#94151E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f5d44;
  --color-2: #77358f;
  --color-3: #94151e;
  --color-4: #cb283b;
  --color-5: #f7c161;
}

SCSS

$color-1: #5f5d44;
$color-2: #77358f;
$color-3: #94151e;
$color-4: #cb283b;
$color-5: #f7c161;

TAILWIND

colors: {
  'brand-1': '#5f5d44',
  'brand-2': '#77358f',
  'brand-3': '#94151e',
  'brand-4': '#cb283b',
  'brand-5': '#f7c161',
}

RGB Array

[95, 93, 68], [119, 53, 143], [148, 21, 30], [203, 40, 59], [247, 193, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F5D44, #77358F, #94151E, #CB283B, #F7C161 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: #5f5d44; --color-2: #77358f; --color-3: #94151e; --color-4: #cb283b; --color-5: #f7c161. 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