#957344 + #B55D30 + #F22E1B + #583126 + #31211F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#957344

Ochre · Sienna · Amber Brown

HEX

#957344

RGB

rgb(149, 115, 68)

HSL

hsl(35, 37%, 43%)

HSB

hsb(35, 54%, 58%)

CMYK

cmyk(0%, 23%, 54%, 42%)

Oklch

oklch(57.8% 0.077 74.2)

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

#B55D30

Tangerine · Sienna · Amber Brown

HEX

#B55D30

RGB

rgb(181, 93, 48)

HSL

hsl(20, 58%, 45%)

HSB

hsb(20, 73%, 71%)

CMYK

cmyk(0%, 49%, 73%, 29%)

Oklch

oklch(57.5% 0.128 45.8)

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

#F22E1B

Vermilion · OrangeRed · Passion Red

HEX

#F22E1B

RGB

rgb(242, 46, 27)

HSL

hsl(5, 89%, 53%)

HSB

hsb(5, 89%, 95%)

CMYK

cmyk(0%, 81%, 89%, 5%)

Oklch

oklch(62.1% 0.231 30.2)

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

#583126

Crimson · DarkOliveGreen · Wine Red

HEX

#583126

RGB

rgb(88, 49, 38)

HSL

hsl(13, 40%, 25%)

HSB

hsb(13, 57%, 35%)

CMYK

cmyk(0%, 44%, 57%, 65%)

Oklch

oklch(36.0% 0.060 36.6)

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

#31211F

Crimson · DarkSlateGray · Deep Berry

HEX

#31211F

RGB

rgb(49, 33, 31)

HSL

hsl(7, 23%, 16%)

HSB

hsb(7, 37%, 19%)

CMYK

cmyk(0%, 33%, 37%, 81%)

Oklch

oklch(26.7% 0.025 26.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

957344

456796

Analogous

964C45

957344

8F9645

Triadic

957344

459674

744596

Split-Comp.

957344

458F96

4C4596

Tetradic

957344

45964C

456796

96458F

Contrast Matrix WCAG 2.1 Contrast

957344	B55D30	F22E1B	583126	31211F
—	1.1 Fail	1.1 Fail	2.6 Fail	3.5 AA Large
1.1 Fail	—	1.1 Fail	2.4 Fail	3.3 AA Large
1.1 Fail	1.1 Fail	—	2.8 Fail	3.8 AA Large
2.6 Fail	2.4 Fail	2.8 Fail	—	1.4 Fail
3.5 AA Large	3.3 AA Large	3.8 AA Large	1.4 Fail	—

White BG

4.4AA Large

4.6AA

4.1AA Large

11.2AAA

15.4AAA

Black BG

4.8AA

4.6AA

5.2AA

1.9Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

86864F

8F8E3B

9D9B20

474729

2A2A1F

Deuteranopia

888B52

949B3D

A9B721

494C29

2B2C20

Tritanopia

93585A

B14345

E82324

562B2B

302020

Achromatopsia

787878

727272

666666

3B3B3B

262626

Shades & Tints Shades & Tints

#957344

Dark

Light

#B55D30

Dark

Light

#F22E1B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #957344;
  --color-2: #b55d30;
  --color-3: #f22e1b;
  --color-4: #583126;
  --color-5: #31211f;
}

SCSS

$color-1: #957344;
$color-2: #b55d30;
$color-3: #f22e1b;
$color-4: #583126;
$color-5: #31211f;

TAILWIND

colors: {
  'brand-1': '#957344',
  'brand-2': '#b55d30',
  'brand-3': '#f22e1b',
  'brand-4': '#583126',
  'brand-5': '#31211f',
}

RGB Array

[149, 115, 68], [181, 93, 48], [242, 46, 27], [88, 49, 38], [49, 33, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #957344, #B55D30, #F22E1B, #583126, #31211F 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: #957344; --color-2: #b55d30; --color-3: #f22e1b; --color-4: #583126; --color-5: #31211f. 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