#615133 + #4D3C31 + #382D2C + #2B2424 + #F7143A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#615133

Ochre · DarkOliveGreen · Amber Brown

HEX

#615133

RGB

rgb(97, 81, 51)

HSL

hsl(39, 31%, 29%)

HSB

hsb(39, 47%, 38%)

CMYK

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

Oklch

oklch(44.3% 0.050 82.5)

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

#4D3C31

Tangerine · DarkSlateGray · Cinnamon

HEX

#4D3C31

RGB

rgb(77, 60, 49)

HSL

hsl(24, 22%, 25%)

HSB

hsb(24, 36%, 30%)

CMYK

cmyk(0%, 22%, 36%, 70%)

Oklch

oklch(37.1% 0.030 54.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#382D2C

Crimson · DarkSlateGray · Deep Berry

HEX

#382D2C

RGB

rgb(56, 45, 44)

HSL

hsl(5, 12%, 20%)

HSB

hsb(5, 21%, 22%)

CMYK

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

Oklch

oklch(30.9% 0.016 24.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#2B2424

Crimson · DarkSlateGray · Dark Stone

HEX

#2B2424

RGB

rgb(43, 36, 36)

HSL

hsl(0, 9%, 15%)

HSB

hsb(0, 16%, 17%)

CMYK

cmyk(0%, 16%, 16%, 83%)

Oklch

oklch(26.8% 0.011 17.8)

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

#F7143A

Vermilion · Crimson · Passion Red

HEX

#F7143A

RGB

rgb(247, 20, 58)

HSL

hsl(350, 93%, 52%)

HSB

hsb(350, 92%, 97%)

CMYK

cmyk(0%, 92%, 77%, 3%)

Oklch

oklch(62.1% 0.244 22.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

615133

334361

Analogous

613A33

615133

5A6133

Triadic

615133

336151

513361

Split-Comp.

615133

335A61

3A3361

Tetradic

615133

33613A

334361

61335A

Contrast Matrix WCAG 2.1 Contrast

615133	4D3C31	382D2C	2B2424	F7143A
—	1.4 Fail	1.7 Fail	2.0 Fail	1.9 Fail
1.4 Fail	—	1.3 Fail	1.5 Fail	2.6 Fail
1.7 Fail	1.3 Fail	—	1.1 Fail	3.2 AA Large
2.0 Fail	1.5 Fail	1.1 Fail	—	3.7 AA Large
1.9 Fail	2.6 Fail	3.2 AA Large	3.7 AA Large	—

White BG

7.7AAA

10.5AAA

13.3AAA

15.2AAA

4.1AA Large

Black BG

2.7Fail

2.0Fail

1.6Fail

1.4Fail

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A3A

464534

33332C

282824

959331

Deuteranopia

5B5C3C

474834

34352C

282924

A2B32F

Tritanopia

604041

4C3636

372C2C

2B2424

EC2A28

Achromatopsia

525252

404040

303030

262626

5C5C5C

Shades & Tints Shades & Tints

#615133

Dark

Light

#4D3C31

Dark

Light

#382D2C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #615133;
  --color-2: #4d3c31;
  --color-3: #382d2c;
  --color-4: #2b2424;
  --color-5: #f7143a;
}

SCSS

$color-1: #615133;
$color-2: #4d3c31;
$color-3: #382d2c;
$color-4: #2b2424;
$color-5: #f7143a;

TAILWIND

colors: {
  'brand-1': '#615133',
  'brand-2': '#4d3c31',
  'brand-3': '#382d2c',
  'brand-4': '#2b2424',
  'brand-5': '#f7143a',
}

RGB Array

[97, 81, 51], [77, 60, 49], [56, 45, 44], [43, 36, 36], [247, 20, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #615133, #4D3C31, #382D2C, #2B2424, #F7143A 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: #615133; --color-2: #4d3c31; --color-3: #382d2c; --color-4: #2b2424; --color-5: #f7143a. 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