← Back to Editor

#2F180A · #D0492B · #753D1A · #443828 · #343025

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

#2F180A

Tangerine · Black · Cinnamon

HEX
#2F180A
RGB
rgb(47, 24, 10)
HSL
hsl(23, 65%, 11%)
HSB
hsb(23, 79%, 18%)
CMYK
cmyk(0%, 49%, 79%, 82%)
Oklch
oklch(23.8% 0.044 50.6)

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

#D0492B

Vermilion · Chocolate · Passion Red

HEX
#D0492B
RGB
rgb(208, 73, 43)
HSL
hsl(11, 66%, 49%)
HSB
hsb(11, 79%, 82%)
CMYK
cmyk(0%, 65%, 79%, 18%)
Oklch
oklch(58.8% 0.176 34.0)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#753D1A

Tangerine · Sienna · Amber Brown

HEX
#753D1A
RGB
rgb(117, 61, 26)
HSL
hsl(23, 64%, 28%)
HSB
hsb(23, 78%, 46%)
CMYK
cmyk(0%, 48%, 78%, 54%)
Oklch
oklch(42.4% 0.092 49.9)

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

#443828

Ochre · DarkSlateGray · Cinnamon

HEX
#443828
RGB
rgb(68, 56, 40)
HSL
hsl(34, 26%, 21%)
HSB
hsb(34, 41%, 27%)
CMYK
cmyk(0%, 18%, 41%, 73%)
Oklch
oklch(34.9% 0.031 74.5)

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

#343025

Ochre · DarkSlateGray · Amber Gold

HEX
#343025
RGB
rgb(52, 48, 37)
HSL
hsl(44, 17%, 17%)
HSB
hsb(44, 29%, 20%)
CMYK
cmyk(0%, 8%, 29%, 80%)
Oklch
oklch(31.0% 0.020 90.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F180A
0A202E

Analogous

2E0A0E
2F180A
2E2A0A

Triadic

2F180A
0A2E18
180A2E

Split-Comp.

2F180A
0A2E2A
0A0E2E

Tetradic

2F180A
0E2E0A
0A202E
2A0A2E

Contrast Matrix WCAG 2.1 Contrast

2F180A
D0492B
753D1A
443828
343025
—
3.7
AA Large
1.9
Fail
1.5
Fail
1.3
Fail
3.7
AA Large
—
1.9
Fail
2.5
Fail
2.9
Fail
1.9
Fail
1.9
Fail
—
1.3
Fail
1.5
Fail
1.5
Fail
2.5
Fail
1.3
Fail
—
1.2
Fail
1.3
Fail
2.9
Fail
1.5
Fail
1.2
Fail
—
White BG
16.7AAA
4.5AA Large
8.6AAA
11.4AAA
13.2AAA
Black BG
1.3Fail
4.7AA
2.4Fail
1.8Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

25250D
969432
5D5C22
3F3F2C
323228

Deuteranopia

26280E
9DA834
606425
40402D
333328

Tritanopia

2E1011
C93839
72292B
432F30
342A2A

Achromatopsia

1D1D1D
6E6E6E
4A4A4A
3A3A3A
303030

Shades & Tints Shades & Tints

#2F180A

Dark
Light

#D0492B

Dark
Light

#753D1A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f180a;
  --color-2: #d0492b;
  --color-3: #753d1a;
  --color-4: #443828;
  --color-5: #343025;
}

SCSS

$color-1: #2f180a;
$color-2: #d0492b;
$color-3: #753d1a;
$color-4: #443828;
$color-5: #343025;

TAILWIND

colors: {
  'brand-1': '#2f180a',
  'brand-2': '#d0492b',
  'brand-3': '#753d1a',
  'brand-4': '#443828',
  'brand-5': '#343025',
}

RGB Array

[47, 24, 10], [208, 73, 43], [117, 61, 26], [68, 56, 40], [52, 48, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F180A, #D0492B, #753D1A, #443828, #343025 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: #2f180a; --color-2: #d0492b; --color-3: #753d1a; --color-4: #443828; --color-5: #343025. 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