← Back to Editor

#2F221F · #271C17 · #1E1714 · #161310 · #151101

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 Library

Color Details Color Details

#2F221F

Crimson · Black · Deep Berry

HEX
#2F221F
RGB
rgb(47, 34, 31)
HSL
hsl(11, 21%, 15%)
HSB
hsb(11, 34%, 18%)
CMYK
cmyk(0%, 28%, 34%, 82%)
Oklch
oklch(26.7% 0.021 33.3)

TraditionalCrimson」· PaintDeep Berry」· Creative Blush Sunrise

#271C17

Tangerine · Black · Cinnamon

HEX
#271C17
RGB
rgb(39, 28, 23)
HSL
hsl(19, 26%, 12%)
HSB
hsb(19, 41%, 15%)
CMYK
cmyk(0%, 28%, 41%, 85%)
Oklch
oklch(23.8% 0.020 45.6)

TraditionalTangerine」· PaintCinnamon」· Creative Blush Sunrise

#1E1714

Tangerine · Black · Cinnamon

HEX
#1E1714
RGB
rgb(30, 23, 20)
HSL
hsl(18, 20%, 10%)
HSB
hsb(18, 33%, 12%)
CMYK
cmyk(0%, 23%, 33%, 88%)
Oklch
oklch(21.2% 0.013 44.5)

TraditionalTangerine」· PaintCinnamon」· Creative Blush Sunrise

#161310

Ochre · Black · Cinnamon

HEX
#161310
RGB
rgb(22, 19, 16)
HSL
hsl(30, 16%, 7%)
HSB
hsb(30, 27%, 9%)
CMYK
cmyk(0%, 14%, 27%, 91%)
Oklch
oklch(18.9% 0.008 67.3)

TraditionalOchre」· PaintCinnamon」· Creative Blush Sunrise

#151101

Ochre · Black · Amber Gold

HEX
#151101
RGB
rgb(21, 17, 1)
HSL
hsl(48, 91%, 4%)
HSB
hsb(48, 95%, 8%)
CMYK
cmyk(0%, 19%, 95%, 92%)
Oklch
oklch(17.7% 0.034 98.1)

TraditionalOchre」· PaintAmber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F221F
1E2B2E

Analogous

2E1E23
2F221F
2E291E

Triadic

2F221F
1E2E21
211E2E

Split-Comp.

2F221F
1E2E29
1E232E

Tetradic

2F221F
232E1E
1E2B2E
291E2E

Contrast Matrix WCAG 2.1 Contrast

2F221F
271C17
1E1714
161310
151101
1.1
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.0
Fail
White BG
15.3AAA
16.6AAA
17.7AAA
18.5AAA
18.9AAA
Black BG
1.4Fail
1.3Fail
1.2Fail
1.1Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292920
222218
1B1B15
151511
131305

Deuteranopia

2A2B20
232419
1B1C15
151511
141406

Tritanopia

2E2020
261919
1E1515
161111
150809

Achromatopsia

262626
1F1F1F
191919
141414
101010

Shades & Tints Shades & Tints

#2F221F

Dark
Light

#271C17

Dark
Light

#1E1714

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f221f;
  --color-2: #271c17;
  --color-3: #1e1714;
  --color-4: #161310;
  --color-5: #151101;
}

SCSS

$color-1: #2f221f;
$color-2: #271c17;
$color-3: #1e1714;
$color-4: #161310;
$color-5: #151101;

TAILWIND

colors: {
  'brand-1': '#2f221f',
  'brand-2': '#271c17',
  'brand-3': '#1e1714',
  'brand-4': '#161310',
  'brand-5': '#151101',
}

RGB Array

[47, 34, 31], [39, 28, 23], [30, 23, 20], [22, 19, 16], [21, 17, 1]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F221F, #271C17, #1E1714, #161310, #151101 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: #2f221f; --color-2: #271c17; --color-3: #1e1714; --color-4: #161310; --color-5: #151101. 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 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