← Back to Editor

#0F0E0A · #422A20 · #8C623A · #5F615C · #F5E8D8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#0F0E0A

Ochre · Black · Amber Gold

HEX
#0F0E0A
RGB
rgb(15, 14, 10)
HSL
hsl(48, 20%, 5%)
HSB
hsb(48, 33%, 6%)
CMYK
cmyk(0%, 7%, 33%, 94%)
Oklch
oklch(16.3% 0.008 95.5)

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

#422A20

Tangerine · DarkSlateGray · Cinnamon

HEX
#422A20
RGB
rgb(66, 42, 32)
HSL
hsl(18, 35%, 19%)
HSB
hsb(18, 52%, 26%)
CMYK
cmyk(0%, 36%, 52%, 74%)
Oklch
oklch(31.2% 0.040 43.4)

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

#8C623A

Tangerine · Sienna · Amber Brown

HEX
#8C623A
RGB
rgb(140, 98, 58)
HSL
hsl(29, 41%, 39%)
HSB
hsb(29, 59%, 55%)
CMYK
cmyk(0%, 30%, 59%, 45%)
Oklch
oklch(53.1% 0.078 63.4)

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

#5F615C

Ink Gray · DimGray · Charcoal

HEX
#5F615C
RGB
rgb(95, 97, 92)
HSL
hsl(84, 3%, 37%)
HSB
hsb(84, 5%, 38%)
CMYK
cmyk(2%, 0%, 5%, 62%)
Oklch
oklch(48.9% 0.008 124.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#F5E8D8

Goose Yellow · Beige · Peach Orange

HEX
#F5E8D8
RGB
rgb(245, 232, 216)
HSL
hsl(33, 59%, 90%)
HSB
hsb(33, 12%, 96%)
CMYK
cmyk(0%, 5%, 12%, 4%)
Oklch
oklch(93.7% 0.026 73.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F0E0A
0A0B0F

Analogous

0F0C0A
0F0E0A
0E0F0A

Triadic

0F0E0A
0A0F0E
0E0A0F

Split-Comp.

0F0E0A
0A0E0F
0C0A0F

Tetradic

0F0E0A
0A0F0C
0A0B0F
0F0A0E

Contrast Matrix WCAG 2.1 Contrast

0F0E0A
422A20
8C623A
5F615C
F5E8D8
—
1.5
Fail
3.6
AA Large
3.1
AA Large
16.0
AAA
1.5
Fail
—
2.5
Fail
2.1
Fail
11.0
AAA
3.6
AA Large
2.5
Fail
—
1.2
Fail
4.4
AA Large
3.1
AA Large
2.1
Fail
1.2
Fail
—
5.2
AA
16.0
AAA
11.0
AAA
4.4
AA Large
5.2
AA
—
White BG
19.3AAA
13.3AAA
5.4AA
6.3AA
1.2Fail
Black BG
1.1Fail
1.6Fail
3.9AA Large
3.4AA Large
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0F0F0B
383722
7A7944
60605D
EFEFDC

Deuteranopia

0F0F0B
393B23
7C7F46
60605D
F0F1DD

Tritanopia

0F0C0C
412425
8A4B4D
5F5E5E
F4DFE0

Achromatopsia

0E0E0E
303030
6A6A6A
606060
EAEAEA

Shades & Tints Shades & Tints

#0F0E0A

Dark
Light

#422A20

Dark
Light

#8C623A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f0e0a;
  --color-2: #422a20;
  --color-3: #8c623a;
  --color-4: #5f615c;
  --color-5: #f5e8d8;
}

SCSS

$color-1: #0f0e0a;
$color-2: #422a20;
$color-3: #8c623a;
$color-4: #5f615c;
$color-5: #f5e8d8;

TAILWIND

colors: {
  'brand-1': '#0f0e0a',
  'brand-2': '#422a20',
  'brand-3': '#8c623a',
  'brand-4': '#5f615c',
  'brand-5': '#f5e8d8',
}

RGB Array

[15, 14, 10], [66, 42, 32], [140, 98, 58], [95, 97, 92], [245, 232, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0F0E0A, #422A20, #8C623A, #5F615C, #F5E8D8 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #0f0e0a; --color-2: #422a20; --color-3: #8c623a; --color-4: #5f615c; --color-5: #f5e8d8. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 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