#392D37 + #623134 + #9F2F2E + #CB4730 + #F56237 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#392D37

Rose Purple · DarkSlateGray · Dark Purple

HEX

#392D37

RGB

rgb(57, 45, 55)

HSL

hsl(310, 12%, 20%)

HSB

hsb(310, 21%, 22%)

CMYK

cmyk(0%, 21%, 4%, 78%)

Oklch

oklch(31.4% 0.024 331.8)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#623134

Crimson · DarkOliveGreen · Wine Red

HEX

#623134

RGB

rgb(98, 49, 52)

HSL

hsl(356, 33%, 29%)

HSB

hsb(356, 50%, 38%)

CMYK

cmyk(0%, 50%, 47%, 62%)

Oklch

oklch(37.8% 0.071 17.2)

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

#9F2F2E

Crimson · Brown · Wine Red

HEX

#9F2F2E

RGB

rgb(159, 47, 46)

HSL

hsl(1, 55%, 40%)

HSB

hsb(1, 71%, 62%)

CMYK

cmyk(0%, 70%, 71%, 38%)

Oklch

oklch(47.6% 0.148 25.2)

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

#CB4730

Vermilion · Chocolate · Passion Red

HEX

#CB4730

RGB

rgb(203, 71, 48)

HSL

hsl(9, 62%, 49%)

HSB

hsb(9, 76%, 80%)

CMYK

cmyk(0%, 65%, 76%, 20%)

Oklch

oklch(57.8% 0.172 32.2)

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

#F56237

Vermilion · Tomato · Passion Red

HEX

#F56237

RGB

rgb(245, 98, 55)

HSL

hsl(14, 90%, 59%)

HSB

hsb(14, 78%, 96%)

CMYK

cmyk(0%, 60%, 78%, 4%)

Oklch

oklch(67.8% 0.190 36.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

392D37

2D392F

Analogous

352D39

392D37

392D31

Triadic

392D37

37392D

2D3739

Split-Comp.

392D37

31392D

2D3935

Tetradic

392D37

39352D

2D392F

2D3139

Contrast Matrix WCAG 2.1 Contrast

392D37	623134	9F2F2E	CB4730	F56237
—	1.3 Fail	1.8 Fail	2.8 Fail	4.2 AA Large
1.3 Fail	—	1.5 Fail	2.2 Fail	3.3 AA Large
1.8 Fail	1.5 Fail	—	1.5 Fail	2.3 Fail
2.8 Fail	2.2 Fail	1.5 Fail	—	1.5 Fail
4.2 AA Large	3.3 AA Large	2.3 Fail	1.5 Fail	—

White BG

13.1AAA

10.5AAA

7.2AAA

4.7AA

3.1AA Large

Black BG

1.6Fail

2.0Fail

2.9Fail

4.5AA Large

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

343435

4D4C33

6F6D2E

929136

B5B441

Deuteranopia

353534

505333

757D2E

9AA337

BEC944

Tritanopia

383332

603333

992E2E

C43A3B

EE4A4B

Achromatopsia

323232

404040

505050

6C6C6C

898989

Shades & Tints Shades & Tints

#392D37

Dark

Light

#623134

Dark

Light

#9F2F2E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #392d37;
  --color-2: #623134;
  --color-3: #9f2f2e;
  --color-4: #cb4730;
  --color-5: #f56237;
}

SCSS

$color-1: #392d37;
$color-2: #623134;
$color-3: #9f2f2e;
$color-4: #cb4730;
$color-5: #f56237;

TAILWIND

colors: {
  'brand-1': '#392d37',
  'brand-2': '#623134',
  'brand-3': '#9f2f2e',
  'brand-4': '#cb4730',
  'brand-5': '#f56237',
}

RGB Array

[57, 45, 55], [98, 49, 52], [159, 47, 46], [203, 71, 48], [245, 98, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #392D37, #623134, #9F2F2E, #CB4730, #F56237 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: #392d37; --color-2: #623134; --color-3: #9f2f2e; --color-4: #cb4730; --color-5: #f56237. 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