#5F5542 + #9E6C37 + #2B2A27 + #C2862E + #7D2822 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

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

#9E6C37

Ochre · Sienna · Amber Brown

HEX

#9E6C37

RGB

rgb(158, 108, 55)

HSL

hsl(31, 48%, 42%)

HSB

hsb(31, 65%, 62%)

CMYK

cmyk(0%, 32%, 65%, 38%)

Oklch

oklch(57.3% 0.094 65.5)

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

#2B2A27

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2B2A27

RGB

rgb(43, 42, 39)

HSL

hsl(45, 5%, 16%)

HSB

hsb(45, 9%, 17%)

CMYK

cmyk(0%, 2%, 9%, 83%)

Oklch

oklch(28.5% 0.006 91.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#C2862E

Ochre · DarkGoldenRod · Amber Brown

HEX

#C2862E

RGB

rgb(194, 134, 46)

HSL

hsl(36, 62%, 47%)

HSB

hsb(36, 76%, 76%)

CMYK

cmyk(0%, 31%, 76%, 24%)

Oklch

oklch(66.5% 0.124 72.4)

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

#7D2822

Crimson · Brown · Wine Red

HEX

#7D2822

RGB

rgb(125, 40, 34)

HSL

hsl(4, 57%, 31%)

HSB

hsb(4, 73%, 49%)

CMYK

cmyk(0%, 68%, 73%, 51%)

Oklch

oklch(40.5% 0.119 27.7)

Traditional「Crimson」· Paint「Wine Red」· 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	9E6C37	2B2A27	C2862E	7D2822
—	1.6 Fail	2.0 Fail	2.4 Fail	1.3 Fail
1.6 Fail	—	3.2 AA Large	1.4 Fail	2.1 Fail
2.0 Fail	3.2 AA Large	—	4.6 AA	1.5 Fail
2.4 Fail	1.4 Fail	4.6 AA	—	3.1 AA Large
1.3 Fail	2.1 Fail	1.5 Fail	3.1 AA Large	—

White BG

7.3AAA

4.5AA

14.4AAA

3.1AA Large

9.6AAA

Black BG

2.9Fail

4.7AA

1.5Fail

6.7AA

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B47

888844

2B2B28

A8A743

585723

Deuteranopia

5B5C48

8B8F47

2B2B28

ACB048

5D6424

Tritanopia

5F4A4B

9C4E50

2B2828

BF5458

792525

Achromatopsia

565656

757575

2A2A2A

8E8E8E

414141

Shades & Tints Shades & Tints

#5F5542

Dark

Light

#9E6C37

Dark

Light

#2B2A27

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f5542;
  --color-2: #9e6c37;
  --color-3: #2b2a27;
  --color-4: #c2862e;
  --color-5: #7d2822;
}

SCSS

$color-1: #5f5542;
$color-2: #9e6c37;
$color-3: #2b2a27;
$color-4: #c2862e;
$color-5: #7d2822;

TAILWIND

colors: {
  'brand-1': '#5f5542',
  'brand-2': '#9e6c37',
  'brand-3': '#2b2a27',
  'brand-4': '#c2862e',
  'brand-5': '#7d2822',
}

RGB Array

[95, 85, 66], [158, 108, 55], [43, 42, 39], [194, 134, 46], [125, 40, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #5F5542, #9E6C37, #2B2A27, #C2862E, #7D2822 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: #9e6c37; --color-3: #2b2a27; --color-4: #c2862e; --color-5: #7d2822. 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 space-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