#5F5542 + #415E54 + #54415E + #BA3C7B + #C99128 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5F5542

Ochre · DarkOliveGreen · Amber Brown

HEX

#5F5542

RGB

rgb(95, 85, 66)

HSL

hsl(39, 18%, 32%)

HSB

hsb(39, 31%, 37%)

CMYK

cmyk(0%, 11%, 31%, 63%)

Oklch

oklch(45.4% 0.032 83.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#415E54

Mineral Blue · DarkSlateGray · Forest Green

HEX

#415E54

RGB

rgb(65, 94, 84)

HSL

hsl(159, 18%, 31%)

HSB

hsb(159, 31%, 37%)

CMYK

cmyk(31%, 0%, 11%, 63%)

Oklch

oklch(45.6% 0.038 171.1)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#54415E

Dark Plum · DarkSlateGray · Eggplant

HEX

#54415E

RGB

rgb(84, 65, 94)

HSL

hsl(279, 18%, 31%)

HSB

hsb(279, 31%, 37%)

CMYK

cmyk(11%, 31%, 0%, 63%)

Oklch

oklch(40.7% 0.053 313.7)

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

#BA3C7B

Dark Violet · MediumVioletRed · Camellia

HEX

#BA3C7B

RGB

rgb(186, 60, 123)

HSL

hsl(330, 51%, 48%)

HSB

hsb(330, 68%, 73%)

CMYK

cmyk(0%, 68%, 34%, 27%)

Oklch

oklch(55.5% 0.172 353.4)

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

#C99128

Ochre · GoldenRod · Amber Brown

HEX

#C99128

RGB

rgb(201, 145, 40)

HSL

hsl(39, 67%, 47%)

HSB

hsb(39, 80%, 79%)

CMYK

cmyk(0%, 28%, 80%, 21%)

Oklch

oklch(69.4% 0.132 78.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F5542

434D60

Analogous

604743

5F5542

5C6043

Triadic

5F5542

436056

564360

Split-Comp.

5F5542

435C60

474360

Tetradic

5F5542

436047

434D60

60435C

Contrast Matrix WCAG 2.1 Contrast

5F5542	415E54	54415E	BA3C7B	C99128
—	1.0 Fail	1.2 Fail	1.4 Fail	2.6 Fail
1.0 Fail	—	1.3 Fail	1.4 Fail	2.6 Fail
1.2 Fail	1.3 Fail	—	1.8 Fail	3.3 AA Large
1.4 Fail	1.4 Fail	1.8 Fail	—	1.9 Fail
2.6 Fail	2.6 Fail	3.3 AA Large	1.9 Fail	—

White BG

7.3AAA

7.1AAA

9.2AAA

5.2AA

2.8Fail

Black BG

2.9Fail

3.0Fail

2.3Fail

4.0AA Large

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B47

4E4E56

4C4C57

83826C

B1B041

Deuteranopia

5B5C48

4C4A57

4D4E55

8B9468

B4B848

Tritanopia

5F4A4B

425859

535150

B4605D

C6555A

Achromatopsia

565656

545454

4A4A4A

696969

969696

Shades & Tints Shades & Tints

#5F5542

Dark

Light

#415E54

Dark

Light

#54415E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f5542;
  --color-2: #415e54;
  --color-3: #54415e;
  --color-4: #ba3c7b;
  --color-5: #c99128;
}

SCSS

$color-1: #5f5542;
$color-2: #415e54;
$color-3: #54415e;
$color-4: #ba3c7b;
$color-5: #c99128;

TAILWIND

colors: {
  'brand-1': '#5f5542',
  'brand-2': '#415e54',
  'brand-3': '#54415e',
  'brand-4': '#ba3c7b',
  'brand-5': '#c99128',
}

RGB Array

[95, 85, 66], [65, 94, 84], [84, 65, 94], [186, 60, 123], [201, 145, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F5542, #415E54, #54415E, #BA3C7B, #C99128 is ideal for: tech websites, dark mode UIs, game UIs. 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: #5f5542; --color-2: #415e54; --color-3: #54415e; --color-4: #ba3c7b; --color-5: #c99128. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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