#0F0A33 + #371B41 + #7D3C44 + #B15C3F + #D08716 · 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

#0F0A33

Deep Indigo · Black · Deep Sea Blue

HEX

#0F0A33

RGB

rgb(15, 10, 51)

HSL

hsl(247, 67%, 12%)

HSB

hsb(247, 80%, 20%)

CMYK

cmyk(71%, 80%, 0%, 80%)

Oklch

oklch(18.5% 0.077 281.3)

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

#371B41

Dark Plum · DarkSlateGray · Dark Purple

HEX

#371B41

RGB

rgb(55, 27, 65)

HSL

hsl(284, 41%, 18%)

HSB

hsb(284, 58%, 25%)

CMYK

cmyk(15%, 58%, 0%, 75%)

Oklch

oklch(27.9% 0.075 316.5)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#7D3C44

Crimson · Sienna · Wine Red

HEX

#7D3C44

RGB

rgb(125, 60, 68)

HSL

hsl(353, 35%, 36%)

HSB

hsb(353, 52%, 49%)

CMYK

cmyk(0%, 52%, 46%, 51%)

Oklch

oklch(44.2% 0.090 13.8)

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

#B15C3F

Tangerine · Sienna · Amber Brown

HEX

#B15C3F

RGB

rgb(177, 92, 63)

HSL

hsl(15, 48%, 47%)

HSB

hsb(15, 64%, 69%)

CMYK

cmyk(0%, 48%, 64%, 31%)

Oklch

oklch(57.0% 0.119 39.4)

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

#D08716

Ochre · DarkGoldenRod · Amber Brown

HEX

#D08716

RGB

rgb(208, 135, 22)

HSL

hsl(36, 81%, 45%)

HSB

hsb(36, 89%, 82%)

CMYK

cmyk(0%, 35%, 89%, 18%)

Oklch

oklch(68.3% 0.143 70.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F0A33

2E330A

Analogous

0A1A33

0F0A33

230A33

Triadic

0F0A33

330F0A

0A330F

Split-Comp.

0F0A33

33230A

1A330A

Tetradic

0F0A33

330A1A

2E330A

0A3323

Contrast Matrix WCAG 2.1 Contrast

0F0A33	371B41	7D3C44	B15C3F	D08716
—	1.3 Fail	2.3 Fail	4.0 AA Large	6.4 AA
1.3 Fail	—	1.9 Fail	3.2 AA Large	5.1 AA
2.3 Fail	1.9 Fail	—	1.7 Fail	2.8 Fail
4.0 AA Large	3.2 AA Large	1.7 Fail	—	1.6 Fail
6.4 AA	5.1 AA	2.8 Fail	1.6 Fail	—

White BG

18.9AAA

15.0AAA

8.1AAA

4.7AA

2.9Fail

Black BG

1.1Fail

1.4Fail

2.6Fail

4.5AA Large

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0D0D29

2B2B38

616042

8C8B46

B0B031

Deuteranopia

0D0E27

2D2F36

656A42

919848

B5BA38

Tritanopia

0F2120

36312F

7A4140

AD4C4D

CC474C

Achromatopsia

101010

282828

505050

727272

909090

Shades & Tints Shades & Tints

#0F0A33

Dark

Light

#371B41

Dark

Light

#7D3C44

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f0a33;
  --color-2: #371b41;
  --color-3: #7d3c44;
  --color-4: #b15c3f;
  --color-5: #d08716;
}

SCSS

$color-1: #0f0a33;
$color-2: #371b41;
$color-3: #7d3c44;
$color-4: #b15c3f;
$color-5: #d08716;

TAILWIND

colors: {
  'brand-1': '#0f0a33',
  'brand-2': '#371b41',
  'brand-3': '#7d3c44',
  'brand-4': '#b15c3f',
  'brand-5': '#d08716',
}

RGB Array

[15, 10, 51], [55, 27, 65], [125, 60, 68], [177, 92, 63], [208, 135, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #0F0A33, #371B41, #7D3C44, #B15C3F, #D08716 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: #0f0a33; --color-2: #371b41; --color-3: #7d3c44; --color-4: #b15c3f; --color-5: #d08716. 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