#D96C36 + #C45E4F + #853D60 + #592B5E + #362247 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D96C36

Tangerine · Chocolate · Warm Sun

HEX

#D96C36

RGB

rgb(217, 108, 54)

HSL

hsl(20, 68%, 53%)

HSB

hsb(20, 75%, 85%)

CMYK

cmyk(0%, 50%, 75%, 15%)

Oklch

oklch(65.1% 0.152 44.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C45E4F

Crimson · Sienna · Passion Red

HEX

#C45E4F

RGB

rgb(196, 94, 79)

HSL

hsl(8, 50%, 54%)

HSB

hsb(8, 60%, 77%)

CMYK

cmyk(0%, 52%, 60%, 23%)

Oklch

oklch(60.3% 0.134 30.1)

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

#853D60

Dark Violet · DimGray · Camellia

HEX

#853D60

RGB

rgb(133, 61, 96)

HSL

hsl(331, 37%, 38%)

HSB

hsb(331, 54%, 52%)

CMYK

cmyk(0%, 54%, 28%, 48%)

Oklch

oklch(46.5% 0.107 351.6)

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

#592B5E

Dark Plum · DarkSlateBlue · Eggplant

HEX

#592B5E

RGB

rgb(89, 43, 94)

HSL

hsl(294, 37%, 27%)

HSB

hsb(294, 54%, 37%)

CMYK

cmyk(5%, 54%, 0%, 63%)

Oklch

oklch(37.2% 0.100 323.6)

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

#362247

Dark Plum · DarkSlateGray · Eggplant

HEX

#362247

RGB

rgb(54, 34, 71)

HSL

hsl(272, 35%, 21%)

HSB

hsb(272, 52%, 28%)

CMYK

cmyk(24%, 52%, 0%, 72%)

Oklch

oklch(29.5% 0.069 307.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D96C36

36A2D9

Analogous

D93651

D96C36

D9BD36

Triadic

D96C36

36D96C

6C36D9

Split-Comp.

D96C36

36D9BD

3651D9

Tetradic

D96C36

51D936

36A2D9

BD36D9

Contrast Matrix WCAG 2.1 Contrast

D96C36	C45E4F	853D60	592B5E	362247
—	1.2 Fail	2.2 Fail	3.2 AA Large	4.2 AA Large
1.2 Fail	—	1.8 Fail	2.6 Fail	3.4 AA Large
2.2 Fail	1.8 Fail	—	1.5 Fail	1.9 Fail
3.2 AA Large	2.6 Fail	1.5 Fail	—	1.3 Fail
4.2 AA Large	3.4 AA Large	1.9 Fail	1.3 Fail	—

White BG

3.4AA Large

4.1AA Large

7.4AAA

10.9AAA

14.2AAA

Black BG

6.1AA

5.1AA

2.8Fail

1.9Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA943

989753

666558

454552

2D2D3E

Deuteranopia

B0B846

9EA554

6A6F55

484B4F

2F303C

Tritanopia

D44D50

BF5556

81514F

574846

353735

Achromatopsia

868686

7B7B7B

575757

3F3F3F

2C2C2C

Shades & Tints Shades & Tints

#D96C36

Dark

Light

#C45E4F

Dark

Light

#853D60

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d96c36;
  --color-2: #c45e4f;
  --color-3: #853d60;
  --color-4: #592b5e;
  --color-5: #362247;
}

SCSS

$color-1: #d96c36;
$color-2: #c45e4f;
$color-3: #853d60;
$color-4: #592b5e;
$color-5: #362247;

TAILWIND

colors: {
  'brand-1': '#d96c36',
  'brand-2': '#c45e4f',
  'brand-3': '#853d60',
  'brand-4': '#592b5e',
  'brand-5': '#362247',
}

RGB Array

[217, 108, 54], [196, 94, 79], [133, 61, 96], [89, 43, 94], [54, 34, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D96C36, #C45E4F, #853D60, #592B5E, #362247 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: #d96c36; --color-2: #c45e4f; --color-3: #853d60; --color-4: #592b5e; --color-5: #362247. 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