#BA4936 + #854E38 + #30393F + #261E40 + #1F1629 · 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

#BA4936

Crimson · Sienna · Passion Red

HEX

#BA4936

RGB

rgb(186, 73, 54)

HSL

hsl(9, 55%, 47%)

HSB

hsb(9, 71%, 73%)

CMYK

cmyk(0%, 61%, 71%, 27%)

Oklch

oklch(55.4% 0.150 31.7)

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

#854E38

Tangerine · Sienna · Amber Brown

HEX

#854E38

RGB

rgb(133, 78, 56)

HSL

hsl(17, 41%, 37%)

HSB

hsb(17, 58%, 52%)

CMYK

cmyk(0%, 41%, 58%, 48%)

Oklch

oklch(48.3% 0.082 42.3)

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

#30393F

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#30393F

RGB

rgb(48, 57, 63)

HSL

hsl(204, 14%, 22%)

HSB

hsb(204, 24%, 25%)

CMYK

cmyk(24%, 10%, 0%, 75%)

Oklch

oklch(33.9% 0.016 237.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#261E40

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX

#261E40

RGB

rgb(38, 30, 64)

HSL

hsl(254, 36%, 18%)

HSB

hsb(254, 53%, 25%)

CMYK

cmyk(41%, 53%, 0%, 75%)

Oklch

oklch(26.3% 0.062 292.4)

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

#1F1629

Deep Indigo · Black · Dark Purple

HEX

#1F1629

RGB

rgb(31, 22, 41)

HSL

hsl(268, 30%, 12%)

HSB

hsb(268, 46%, 16%)

CMYK

cmyk(24%, 46%, 0%, 84%)

Oklch

oklch(22.1% 0.038 305.3)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA4936

36A6BA

Analogous

BA3664

BA4936

BA8C36

Triadic

BA4936

36BA4A

4A36BA

Split-Comp.

BA4936

36BA8C

3664BA

Tetradic

BA4936

64BA36

36A6BA

8C36BA

Contrast Matrix WCAG 2.1 Contrast

BA4936	854E38	30393F	261E40	1F1629
—	1.3 Fail	2.3 Fail	3.1 AA Large	3.4 AA Large
1.3 Fail	—	1.8 Fail	2.3 Fail	2.6 Fail
2.3 Fail	1.8 Fail	—	1.3 Fail	1.5 Fail
3.1 AA Large	2.3 Fail	1.3 Fail	—	1.1 Fail
3.4 AA Large	2.6 Fail	1.5 Fail	1.1 Fail	—

White BG

5.1AA

6.7AA

11.8AAA

15.6AAA

17.4AAA

Black BG

4.1AA Large

3.1AA Large

1.8Fail

1.3Fail

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

89883B

6D6D3D

34343E

232238

1B1B24

Deuteranopia

90983C

70753F

33333D

232436

1C1C23

Tritanopia

B43E3F

824242

303C3C

263130

1F2120

Achromatopsia

696969

5C5C5C

373737

242424

1B1B1B

Shades & Tints Shades & Tints

#BA4936

Dark

Light

#854E38

Dark

Light

#30393F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba4936;
  --color-2: #854e38;
  --color-3: #30393f;
  --color-4: #261e40;
  --color-5: #1f1629;
}

SCSS

$color-1: #ba4936;
$color-2: #854e38;
$color-3: #30393f;
$color-4: #261e40;
$color-5: #1f1629;

TAILWIND

colors: {
  'brand-1': '#ba4936',
  'brand-2': '#854e38',
  'brand-3': '#30393f',
  'brand-4': '#261e40',
  'brand-5': '#1f1629',
}

RGB Array

[186, 73, 54], [133, 78, 56], [48, 57, 63], [38, 30, 64], [31, 22, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #BA4936, #854E38, #30393F, #261E40, #1F1629 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: #ba4936; --color-2: #854e38; --color-3: #30393f; --color-4: #261e40; --color-5: #1f1629. 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 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