#655C4D + #37322E + #8F2823 + #EA341F + #C4721E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#655C4D

Ochre · DimGray · Amber Brown

HEX

#655C4D

RGB

rgb(101, 92, 77)

HSL

hsl(38, 13%, 35%)

HSB

hsb(38, 24%, 40%)

CMYK

cmyk(0%, 9%, 24%, 60%)

Oklch

oklch(47.9% 0.026 80.5)

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

#37322E

Tangerine · DarkSlateGray · Dark Stone

HEX

#37322E

RGB

rgb(55, 50, 46)

HSL

hsl(27, 9%, 20%)

HSB

hsb(27, 16%, 22%)

CMYK

cmyk(0%, 9%, 16%, 78%)

Oklch

oklch(32.1% 0.010 61.1)

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

#8F2823

Vermilion · Brown · Wine Red

HEX

#8F2823

RGB

rgb(143, 40, 35)

HSL

hsl(3, 61%, 35%)

HSB

hsb(3, 76%, 56%)

CMYK

cmyk(0%, 72%, 76%, 44%)

Oklch

oklch(43.8% 0.139 27.3)

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

#EA341F

Vermilion · OrangeRed · Passion Red

HEX

#EA341F

RGB

rgb(234, 52, 31)

HSL

hsl(6, 83%, 52%)

HSB

hsb(6, 87%, 92%)

CMYK

cmyk(0%, 78%, 87%, 8%)

Oklch

oklch(61.1% 0.220 30.6)

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

#C4721E

Ochre · Chocolate · Amber Brown

HEX

#C4721E

RGB

rgb(196, 114, 30)

HSL

hsl(30, 73%, 44%)

HSB

hsb(30, 85%, 77%)

CMYK

cmyk(0%, 42%, 85%, 23%)

Oklch

oklch(63.0% 0.137 59.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

655C4D

4E5665

Analogous

65514E

655C4D

62654E

Triadic

655C4D

4E655C

5C4E65

Split-Comp.

655C4D

4E6265

514E65

Tetradic

655C4D

4E6551

4E5665

654E62

Contrast Matrix WCAG 2.1 Contrast

655C4D	37322E	8F2823	EA341F	C4721E
—	1.9 Fail	1.3 Fail	1.6 Fail	1.8 Fail
1.9 Fail	—	1.5 Fail	3.0 AA Large	3.5 AA Large
1.3 Fail	1.5 Fail	—	2.0 Fail	2.3 Fail
1.6 Fail	3.0 AA Large	2.0 Fail	—	1.2 Fail
1.8 Fail	3.5 AA Large	2.3 Fail	1.2 Fail	—

White BG

6.6AA

12.7AAA

8.4AAA

4.2AA Large

3.6AA Large

Black BG

3.2AA Large

1.7Fail

2.5Fail

5.0AA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

616151

35352F

626124

9B9A24

A0A032

Deuteranopia

626252

35362F

687025

A6B325

A5AB37

Tritanopia

655354

373030

8A2525

E12829

C04246

Achromatopsia

5D5D5D

333333

464646

686868

818181

Shades & Tints Shades & Tints

#655C4D

Dark

Light

#37322E

Dark

Light

#8F2823

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #655c4d;
  --color-2: #37322e;
  --color-3: #8f2823;
  --color-4: #ea341f;
  --color-5: #c4721e;
}

SCSS

$color-1: #655c4d;
$color-2: #37322e;
$color-3: #8f2823;
$color-4: #ea341f;
$color-5: #c4721e;

TAILWIND

colors: {
  'brand-1': '#655c4d',
  'brand-2': '#37322e',
  'brand-3': '#8f2823',
  'brand-4': '#ea341f',
  'brand-5': '#c4721e',
}

RGB Array

[101, 92, 77], [55, 50, 46], [143, 40, 35], [234, 52, 31], [196, 114, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #655C4D, #37322E, #8F2823, #EA341F, #C4721E 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: #655c4d; --color-2: #37322e; --color-3: #8f2823; --color-4: #ea341f; --color-5: #c4721e. 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