#9B3638 + #793C3D + #574142 + #354747 + #134D4D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9B3638

Crimson · Brown · Passion Red

HEX

#9B3638

RGB

rgb(155, 54, 56)

HSL

hsl(359, 48%, 41%)

HSB

hsb(359, 65%, 61%)

CMYK

cmyk(0%, 65%, 64%, 39%)

Oklch

oklch(47.9% 0.135 22.6)

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

#793C3D

Crimson · Sienna · Wine Red

HEX

#793C3D

RGB

rgb(121, 60, 61)

HSL

hsl(359, 34%, 35%)

HSB

hsb(359, 50%, 47%)

CMYK

cmyk(0%, 50%, 50%, 53%)

Oklch

oklch(43.4% 0.085 20.2)

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

#574142

Crimson · DarkSlateGray · Wine Red

HEX

#574142

RGB

rgb(87, 65, 66)

HSL

hsl(357, 14%, 30%)

HSB

hsb(357, 25%, 34%)

CMYK

cmyk(0%, 25%, 24%, 66%)

Oklch

oklch(39.9% 0.031 15.5)

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

#354747

Slate Blue · DarkSlateGray · Peacock Green

HEX

#354747

RGB

rgb(53, 71, 71)

HSL

hsl(180, 15%, 24%)

HSB

hsb(180, 25%, 28%)

CMYK

cmyk(25%, 0%, 0%, 72%)

Oklch

oklch(38.3% 0.023 196.2)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#134D4D

Lake Blue · DarkSlateGray · Peacock Green

HEX

#134D4D

RGB

rgb(19, 77, 77)

HSL

hsl(180, 60%, 19%)

HSB

hsb(180, 75%, 30%)

CMYK

cmyk(75%, 0%, 0%, 70%)

Oklch

oklch(38.4% 0.058 195.0)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B3638

369B99

Analogous

9B366A

9B3638

9B6736

Triadic

9B3638

389B36

36389B

Split-Comp.

9B3638

369B67

366A9B

Tetradic

9B3638

6A9B36

369B99

67369B

Contrast Matrix WCAG 2.1 Contrast

9B3638	793C3D	574142	354747	134D4D
—	1.2 Fail	1.3 Fail	1.4 Fail	1.4 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.2 Fail
1.3 Fail	1.1 Fail	—	1.0 Fail	1.0 Fail
1.4 Fail	1.2 Fail	1.0 Fail	—	1.0 Fail
1.4 Fail	1.2 Fail	1.0 Fail	1.0 Fail	—

White BG

7.1AAA

8.3AAA

9.4AAA

9.8AAA

9.6AAA

Black BG

3.0Fail

2.5Fail

2.2Fail

2.1Fail

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6E38

5F5E3D

4D4D42

3D3D47

2C2D4D

Deuteranopia

757D37

62673D

4F5042

3C3A47

29244D

Tritanopia

963737

763D3D

564242

364747

164D4D

Achromatopsia

545454

4E4E4E

484848

424242

3C3C3C

Shades & Tints Shades & Tints

#9B3638

Dark

Light

#793C3D

Dark

Light

#574142

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b3638;
  --color-2: #793c3d;
  --color-3: #574142;
  --color-4: #354747;
  --color-5: #134d4d;
}

SCSS

$color-1: #9b3638;
$color-2: #793c3d;
$color-3: #574142;
$color-4: #354747;
$color-5: #134d4d;

TAILWIND

colors: {
  'brand-1': '#9b3638',
  'brand-2': '#793c3d',
  'brand-3': '#574142',
  'brand-4': '#354747',
  'brand-5': '#134d4d',
}

RGB Array

[155, 54, 56], [121, 60, 61], [87, 65, 66], [53, 71, 71], [19, 77, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B3638, #793C3D, #574142, #354747, #134D4D 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: #9b3638; --color-2: #793c3d; --color-3: #574142; --color-4: #354747; --color-5: #134d4d. 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