#0E1211 + #111C18 + #1E291B + #332F14 + #3F2A0D · 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

#0E1211

Mineral Blue · Black · Peacock Green

HEX

#0E1211

RGB

rgb(14, 18, 17)

HSL

hsl(165, 13%, 6%)

HSB

hsb(165, 22%, 7%)

CMYK

cmyk(22%, 0%, 6%, 93%)

Oklch

oklch(17.7% 0.007 178.8)

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

#111C18

Mineral Blue · Black · Dark Green

HEX

#111C18

RGB

rgb(17, 28, 24)

HSL

hsl(158, 24%, 9%)

HSB

hsb(158, 39%, 11%)

CMYK

cmyk(39%, 0%, 14%, 89%)

Oklch

oklch(21.4% 0.018 170.1)

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

#1E291B

Celadon · Black · Dark Green

HEX

#1E291B

RGB

rgb(30, 41, 27)

HSL

hsl(107, 21%, 13%)

HSB

hsb(107, 34%, 16%)

CMYK

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

Oklch

oklch(26.6% 0.030 139.0)

Traditional「Celadon」· Paint「Dark Green」· Creative Blush Sunrise

#332F14

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#332F14

RGB

rgb(51, 47, 20)

HSL

hsl(52, 44%, 14%)

HSB

hsb(52, 61%, 20%)

CMYK

cmyk(0%, 8%, 61%, 80%)

Oklch

oklch(30.2% 0.043 101.0)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#3F2A0D

Ochre · DarkOliveGreen · Cinnamon

HEX

#3F2A0D

RGB

rgb(63, 42, 13)

HSL

hsl(35, 66%, 15%)

HSB

hsb(35, 79%, 25%)

CMYK

cmyk(0%, 33%, 79%, 75%)

Oklch

oklch(30.4% 0.053 72.0)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0E1211

110D0E

Analogous

0D110E

0E1211

0D1011

Triadic

0E1211

100D11

11100D

Split-Comp.

0E1211

110D10

110E0D

Tetradic

0E1211

0E0D11

110D0E

10110D

Contrast Matrix WCAG 2.1 Contrast

0E1211	111C18	1E291B	332F14	3F2A0D
—	1.1 Fail	1.2 Fail	1.4 Fail	1.4 Fail
1.1 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
1.2 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
1.4 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

18.9AAA

17.5AAA

15.1AAA

13.5AAA

13.6AAA

Black BG

1.1Fail

1.2Fail

1.4Fail

1.6Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

101011

161619

23231E

31311B

363614

Deuteranopia

100F11

151419

22211F

32321C

373916

Tritanopia

0E1111

121A1A

1F2122

332021

3E1A1B

Achromatopsia

111111

181818

242424

2D2D2D

Shades & Tints Shades & Tints

#0E1211

Dark

Light

#111C18

Dark

Light

#1E291B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0e1211;
  --color-2: #111c18;
  --color-3: #1e291b;
  --color-4: #332f14;
  --color-5: #3f2a0d;
}

SCSS

$color-1: #0e1211;
$color-2: #111c18;
$color-3: #1e291b;
$color-4: #332f14;
$color-5: #3f2a0d;

TAILWIND

colors: {
  'brand-1': '#0e1211',
  'brand-2': '#111c18',
  'brand-3': '#1e291b',
  'brand-4': '#332f14',
  'brand-5': '#3f2a0d',
}

RGB Array

[14, 18, 17], [17, 28, 24], [30, 41, 27], [51, 47, 20], [63, 42, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #0E1211, #111C18, #1E291B, #332F14, #3F2A0D 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: #0e1211; --color-2: #111c18; --color-3: #1e291b; --color-4: #332f14; --color-5: #3f2a0d. 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