← Back to Editor

#0E1422 · #2F4A37 · #5B5315 · #C37924

A 4-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#0E1422

Indigo · Black · Deep Sea Blue

HEX
#0E1422
RGB
rgb(14, 20, 34)
HSL
hsl(222, 42%, 9%)
HSB
hsb(222, 59%, 13%)
CMYK
cmyk(59%, 41%, 0%, 87%)
Oklch
oklch(19.3% 0.030 265.9)

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

#2F4A37

Celadon · DarkSlateGray · Forest Green

HEX
#2F4A37
RGB
rgb(47, 74, 55)
HSL
hsl(138, 22%, 24%)
HSB
hsb(138, 36%, 29%)
CMYK
cmyk(36%, 0%, 26%, 71%)
Oklch
oklch(38.1% 0.046 153.1)

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

#5B5315

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#5B5315
RGB
rgb(91, 83, 21)
HSL
hsl(53, 63%, 22%)
HSB
hsb(53, 77%, 36%)
CMYK
cmyk(0%, 9%, 77%, 64%)
Oklch
oklch(43.7% 0.081 101.8)

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

#C37924

Ochre · Chocolate · Amber Brown

HEX
#C37924
RGB
rgb(195, 121, 36)
HSL
hsl(32, 69%, 45%)
HSB
hsb(32, 82%, 76%)
CMYK
cmyk(0%, 38%, 82%, 24%)
Oklch
oklch(64.2% 0.132 64.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0E1422
211B0D

Analogous

0D1D21
0E1422
110D21

Triadic

0E1422
210D13
13210D

Split-Comp.

0E1422
21110D
1D210D

Tetradic

0E1422
210D1D
211B0D
0D2111

Contrast Matrix WCAG 2.1 Contrast

0E1422
2F4A37
5B5315
C37924
—
1.9
Fail
2.4
Fail
5.3
AA
1.9
Fail
—
1.2
Fail
2.8
Fail
2.4
Fail
1.2
Fail
—
2.3
Fail
5.3
AA
2.8
Fail
2.3
Fail
—
White BG
18.4AAA
9.7AAA
7.8AAA
3.5AA Large
Black BG
1.1Fail
2.2Fail
2.7Fail
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

11111F
3B3B3C
585724
A3A239

Deuteranopia

10101E
39373D
585928
A7AD3E

Tritanopia

0E1C1B
303F40
5B3032
BF494C

Achromatopsia

141414
404040
4E4E4E
858585

Shades & Tints Shades & Tints

#0E1422

Dark
Light

#2F4A37

Dark
Light

#5B5315

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0e1422;
  --color-2: #2f4a37;
  --color-3: #5b5315;
  --color-4: #c37924;
}

SCSS

$color-1: #0e1422;
$color-2: #2f4a37;
$color-3: #5b5315;
$color-4: #c37924;

TAILWIND

colors: {
  'brand-1': '#0e1422',
  'brand-2': '#2f4a37',
  'brand-3': '#5b5315',
  'brand-4': '#c37924',
}

RGB Array

[14, 20, 34], [47, 74, 55], [91, 83, 21], [195, 121, 36]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #0E1422, #2F4A37, #5B5315, #C37924 is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #0e1422; --color-2: #2f4a37; --color-3: #5b5315; --color-4: #c37924. 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 general-style 4-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