#C85540 + #B7473C + #7A402C + #593833 + #322D33 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C85540

Crimson · Chocolate · Passion Red

HEX

#C85540

RGB

rgb(200, 85, 64)

HSL

hsl(9, 55%, 52%)

HSB

hsb(9, 68%, 78%)

CMYK

cmyk(0%, 58%, 68%, 22%)

Oklch

oklch(59.3% 0.151 32.2)

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

#B7473C

Crimson · Sienna · Passion Red

HEX

#B7473C

RGB

rgb(183, 71, 60)

HSL

hsl(5, 51%, 48%)

HSB

hsb(5, 67%, 72%)

CMYK

cmyk(0%, 61%, 67%, 28%)

Oklch

oklch(54.7% 0.148 28.4)

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

#7A402C

Tangerine · Sienna · Amber Brown

HEX

#7A402C

RGB

rgb(122, 64, 44)

HSL

hsl(15, 47%, 33%)

HSB

hsb(15, 64%, 48%)

CMYK

cmyk(0%, 48%, 64%, 52%)

Oklch

oklch(43.9% 0.087 39.6)

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

#593833

Crimson · DarkOliveGreen · Wine Red

HEX

#593833

RGB

rgb(89, 56, 51)

HSL

hsl(8, 27%, 27%)

HSB

hsb(8, 43%, 35%)

CMYK

cmyk(0%, 37%, 43%, 65%)

Oklch

oklch(37.8% 0.048 29.0)

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

#322D33

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#322D33

RGB

rgb(50, 45, 51)

HSL

hsl(290, 6%, 19%)

HSB

hsb(290, 12%, 20%)

CMYK

cmyk(2%, 12%, 0%, 80%)

Oklch

oklch(30.5% 0.013 320.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C85540

41B4C8

Analogous

C84170

C85540

C89941

Triadic

C85540

41C855

5541C8

Split-Comp.

C85540

41C899

4170C8

Tetradic

C85540

70C841

41B4C8

9941C8

Contrast Matrix WCAG 2.1 Contrast

C85540	B7473C	7A402C	593833	322D33
—	1.2 Fail	1.9 Fail	2.4 Fail	3.1 AA Large
1.2 Fail	—	1.5 Fail	2.0 Fail	2.6 Fail
1.9 Fail	1.5 Fail	—	1.3 Fail	1.7 Fail
2.4 Fail	2.0 Fail	1.3 Fail	—	1.3 Fail
3.1 AA Large	2.6 Fail	1.7 Fail	1.3 Fail	—

White BG

4.3AA Large

5.3AA

8.1AAA

10.3AAA

13.5AAA

Black BG

4.8AA

4.0AA Large

2.6Fail

2.0Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

969545

87853F

616031

4B4A34

303032

Deuteranopia

9DA646

8D953F

646932

4D4F35

303131

Tritanopia

C2494A

B14141

773536

573535

323030

Achromatopsia

757575

676767

4F4F4F

414141

2F2F2F

Shades & Tints Shades & Tints

#C85540

Dark

Light

#B7473C

Dark

Light

#7A402C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c85540;
  --color-2: #b7473c;
  --color-3: #7a402c;
  --color-4: #593833;
  --color-5: #322d33;
}

SCSS

$color-1: #c85540;
$color-2: #b7473c;
$color-3: #7a402c;
$color-4: #593833;
$color-5: #322d33;

TAILWIND

colors: {
  'brand-1': '#c85540',
  'brand-2': '#b7473c',
  'brand-3': '#7a402c',
  'brand-4': '#593833',
  'brand-5': '#322d33',
}

RGB Array

[200, 85, 64], [183, 71, 60], [122, 64, 44], [89, 56, 51], [50, 45, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #C85540, #B7473C, #7A402C, #593833, #322D33 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: #c85540; --color-2: #b7473c; --color-3: #7a402c; --color-4: #593833; --color-5: #322d33. 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 warm-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