#341405 + #2F1F12 + #2B2B20 + #27372E + #22423B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#341405

Tangerine · Black · Cinnamon

HEX

#341405

RGB

rgb(52, 20, 5)

HSL

hsl(19, 82%, 11%)

HSB

hsb(19, 90%, 20%)

CMYK

cmyk(0%, 62%, 90%, 80%)

Oklch

oklch(23.7% 0.057 44.7)

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

#2F1F12

Tangerine · Black · Cinnamon

HEX

#2F1F12

RGB

rgb(47, 31, 18)

HSL

hsl(27, 45%, 13%)

HSB

hsb(27, 62%, 18%)

CMYK

cmyk(0%, 34%, 62%, 82%)

Oklch

oklch(25.6% 0.034 59.6)

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

#2B2B20

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#2B2B20

RGB

rgb(43, 43, 32)

HSL

hsl(60, 15%, 15%)

HSB

hsb(60, 26%, 17%)

CMYK

cmyk(0%, 0%, 26%, 83%)

Oklch

oklch(28.5% 0.019 107.6)

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

#27372E

Celadon · DarkSlateGray · Dark Green

HEX

#27372E

RGB

rgb(39, 55, 46)

HSL

hsl(146, 17%, 18%)

HSB

hsb(146, 29%, 22%)

CMYK

cmyk(29%, 0%, 16%, 78%)

Oklch

oklch(31.9% 0.026 159.8)

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

#22423B

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#22423B

RGB

rgb(34, 66, 59)

HSL

hsl(167, 32%, 20%)

HSB

hsb(167, 48%, 26%)

CMYK

cmyk(48%, 0%, 11%, 74%)

Oklch

oklch(35.2% 0.040 178.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

341405

052433

Analogous

33050D

341405

332B05

Triadic

341405

053314

140533

Split-Comp.

341405

05332B

050D33

Tetradic

341405

0D3305

052433

2B0533

Contrast Matrix WCAG 2.1 Contrast

341405	2F1F12	2B2B20	27372E	22423B
—	1.1 Fail	1.2 Fail	1.3 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.4 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.3 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.4 Fail	1.3 Fail	1.1 Fail	—

White BG

16.8AAA

15.8AAA

14.3AAA

12.6AAA

11.0AAA

Black BG

1.2Fail

1.3Fail

1.5Fail

1.7Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

262609

282815

2B2B23

2E2E30

30303D

Deuteranopia

282A0A

292A16

2B2B23

2D2C31

2E2C3D

Tritanopia

320B0C

2E1818

2B2525

283232

243E3E

Achromatopsia

1C1C1C

222222

2A2A2A

313131

383838

Shades & Tints Shades & Tints

#341405

Dark

Light

#2F1F12

Dark

Light

#2B2B20

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #341405;
  --color-2: #2f1f12;
  --color-3: #2b2b20;
  --color-4: #27372e;
  --color-5: #22423b;
}

SCSS

$color-1: #341405;
$color-2: #2f1f12;
$color-3: #2b2b20;
$color-4: #27372e;
$color-5: #22423b;

TAILWIND

colors: {
  'brand-1': '#341405',
  'brand-2': '#2f1f12',
  'brand-3': '#2b2b20',
  'brand-4': '#27372e',
  'brand-5': '#22423b',
}

RGB Array

[52, 20, 5], [47, 31, 18], [43, 43, 32], [39, 55, 46], [34, 66, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #341405, #2F1F12, #2B2B20, #27372E, #22423B 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: #341405; --color-2: #2f1f12; --color-3: #2b2b20; --color-4: #27372e; --color-5: #22423b. 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