#380B05 + #AB201B + #E35120 + #625950 + #3B4747 · 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

#380B05

Vermilion · Black · Deep Berry

HEX

#380B05

RGB

rgb(56, 11, 5)

HSL

hsl(7, 84%, 12%)

HSB

hsb(7, 91%, 22%)

CMYK

cmyk(0%, 80%, 91%, 78%)

Oklch

oklch(23.0% 0.073 31.7)

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

#AB201B

Vermilion · FireBrick · Wine Red

HEX

#AB201B

RGB

rgb(171, 32, 27)

HSL

hsl(2, 73%, 39%)

HSB

hsb(2, 84%, 67%)

CMYK

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

Oklch

oklch(48.2% 0.175 28.2)

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

#E35120

Tangerine · Chocolate · Warm Sun

HEX

#E35120

RGB

rgb(227, 81, 32)

HSL

hsl(15, 78%, 51%)

HSB

hsb(15, 86%, 89%)

CMYK

cmyk(0%, 64%, 86%, 11%)

Oklch

oklch(62.7% 0.191 37.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#625950

Ochre · DimGray · Amber Brown

HEX

#625950

RGB

rgb(98, 89, 80)

HSL

hsl(30, 10%, 35%)

HSB

hsb(30, 18%, 38%)

CMYK

cmyk(0%, 9%, 18%, 62%)

Oklch

oklch(47.0% 0.018 67.4)

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

#3B4747

Slate Blue · DarkSlateGray · Dark Stone

HEX

#3B4747

RGB

rgb(59, 71, 71)

HSL

hsl(180, 9%, 25%)

HSB

hsb(180, 17%, 28%)

CMYK

cmyk(17%, 0%, 0%, 72%)

Oklch

oklch(38.7% 0.016 196.5)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

380B05

053238

Analogous

380519

380B05

382505

Triadic

380B05

05380B

0B0538

Split-Comp.

380B05

053825

051938

Tetradic

380B05

193805

053238

250538

Contrast Matrix WCAG 2.1 Contrast

380B05	AB201B	E35120	625950	3B4747
—	2.4 Fail	4.5 AA Large	2.5 Fail	1.8 Fail
2.4 Fail	—	1.8 Fail	1.0 Fail	1.4 Fail
4.5 AA Large	1.8 Fail	—	1.8 Fail	2.5 Fail
2.5 Fail	1.0 Fail	1.8 Fail	—	1.4 Fail
1.8 Fail	1.4 Fail	2.5 Fail	1.4 Fail	—

White BG

17.2AAA

7.1AAA

3.8AA Large

6.9AA

9.6AAA

Black BG

1.2Fail

3.0Fail

5.5AA

3.1AA Large

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

252406

6F6E1C

A4A22C

5E5E52

404047

Deuteranopia

272A07

77811D

ACB72F

5F5F53

403F47

Tritanopia

360808

A41D1D

DC3537

625454

3C4747

Achromatopsia

181818

494949

777777

5B5B5B

434343

Shades & Tints Shades & Tints

#380B05

Dark

Light

#AB201B

Dark

Light

#E35120

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #380b05;
  --color-2: #ab201b;
  --color-3: #e35120;
  --color-4: #625950;
  --color-5: #3b4747;
}

SCSS

$color-1: #380b05;
$color-2: #ab201b;
$color-3: #e35120;
$color-4: #625950;
$color-5: #3b4747;

TAILWIND

colors: {
  'brand-1': '#380b05',
  'brand-2': '#ab201b',
  'brand-3': '#e35120',
  'brand-4': '#625950',
  'brand-5': '#3b4747',
}

RGB Array

[56, 11, 5], [171, 32, 27], [227, 81, 32], [98, 89, 80], [59, 71, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #380B05, #AB201B, #E35120, #625950, #3B4747 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: #380b05; --color-2: #ab201b; --color-3: #e35120; --color-4: #625950; --color-5: #3b4747. 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