#422F31 + #5B5885 + #6F8F82 + #BB7B11 + #F53705 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#422F31

Crimson · DarkSlateGray · Wine Red

HEX

#422F31

RGB

rgb(66, 47, 49)

HSL

hsl(354, 17%, 22%)

HSB

hsb(354, 29%, 26%)

CMYK

cmyk(0%, 29%, 26%, 74%)

Oklch

oklch(32.8% 0.028 11.7)

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

#5B5885

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#5B5885

RGB

rgb(91, 88, 133)

HSL

hsl(244, 20%, 43%)

HSB

hsb(244, 34%, 52%)

CMYK

cmyk(32%, 34%, 0%, 48%)

Oklch

oklch(48.2% 0.072 286.4)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#6F8F82

Mineral Blue · SlateGray · Olive Green

HEX

#6F8F82

RGB

rgb(111, 143, 130)

HSL

hsl(156, 13%, 50%)

HSB

hsb(156, 22%, 56%)

CMYK

cmyk(22%, 0%, 9%, 44%)

Oklch

oklch(62.2% 0.041 168.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#BB7B11

Ochre · DarkGoldenRod · Amber Brown

HEX

#BB7B11

RGB

rgb(187, 123, 17)

HSL

hsl(37, 83%, 40%)

HSB

hsb(37, 91%, 73%)

CMYK

cmyk(0%, 34%, 91%, 27%)

Oklch

oklch(63.4% 0.132 71.8)

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

#F53705

Vermilion · OrangeRed · Passion Red

HEX

#F53705

RGB

rgb(245, 55, 5)

HSL

hsl(13, 96%, 49%)

HSB

hsb(13, 98%, 96%)

CMYK

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

Oklch

oklch(63.2% 0.230 33.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

422F31

2F4240

Analogous

422F3A

422F31

42362F

Triadic

422F31

30422F

2F3042

Split-Comp.

422F31

2F4236

2F3A42

Tetradic

422F31

3A422F

2F4240

362F42

Contrast Matrix WCAG 2.1 Contrast

422F31	5B5885	6F8F82	BB7B11	F53705
—	1.9 Fail	3.5 AA Large	3.5 AA Large	3.2 AA Large
1.9 Fail	—	1.9 Fail	1.9 Fail	1.7 Fail
3.5 AA Large	1.9 Fail	—	1.0 Fail	1.1 Fail
3.5 AA Large	1.9 Fail	1.0 Fail	—	1.1 Fail
3.2 AA Large	1.7 Fail	1.1 Fail	1.1 Fail	—

White BG

12.5AAA

6.6AA

3.5AA Large

3.9AA Large

Black BG

1.7Fail

3.2AA Large

5.9AA

6.0AA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A31

5A5A7A

7D7D85

9F9F2B

A3A111

Deuteranopia

3B3C30

5A5A78

7B7986

A3A831

AEBC14

Tritanopia

413030

5B7270

718888

B83F43

EC1B1D

Achromatopsia

353535

5E5E5E

848484

828282

6A6A6A

Shades & Tints Shades & Tints

#422F31

Dark

Light

#5B5885

Dark

Light

#6F8F82

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #422f31;
  --color-2: #5b5885;
  --color-3: #6f8f82;
  --color-4: #bb7b11;
  --color-5: #f53705;
}

SCSS

$color-1: #422f31;
$color-2: #5b5885;
$color-3: #6f8f82;
$color-4: #bb7b11;
$color-5: #f53705;

TAILWIND

colors: {
  'brand-1': '#422f31',
  'brand-2': '#5b5885',
  'brand-3': '#6f8f82',
  'brand-4': '#bb7b11',
  'brand-5': '#f53705',
}

RGB Array

[66, 47, 49], [91, 88, 133], [111, 143, 130], [187, 123, 17], [245, 55, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #422F31, #5B5885, #6F8F82, #BB7B11, #F53705 is ideal for: corporate websites, product showcases, portfolios. 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: #422f31; --color-2: #5b5885; --color-3: #6f8f82; --color-4: #bb7b11; --color-5: #f53705. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 sunset-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