#543B33 + #523226 + #63301F + #782B13 + #8F2B0A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#543B33

Tangerine · DarkOliveGreen · Amber Brown

HEX

#543B33

RGB

rgb(84, 59, 51)

HSL

hsl(15, 24%, 26%)

HSB

hsb(15, 39%, 33%)

CMYK

cmyk(0%, 30%, 39%, 67%)

Oklch

oklch(37.8% 0.038 38.5)

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

#523226

Tangerine · DarkOliveGreen · Cinnamon

HEX

#523226

RGB

rgb(82, 50, 38)

HSL

hsl(16, 37%, 24%)

HSB

hsb(16, 54%, 32%)

CMYK

cmyk(0%, 39%, 54%, 68%)

Oklch

oklch(35.3% 0.051 41.3)

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

#63301F

Tangerine · DarkOliveGreen · Cinnamon

HEX

#63301F

RGB

rgb(99, 48, 31)

HSL

hsl(15, 52%, 25%)

HSB

hsb(15, 69%, 39%)

CMYK

cmyk(0%, 52%, 69%, 61%)

Oklch

oklch(37.3% 0.079 39.0)

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

#782B13

Vermilion · Maroon · Wine Red

HEX

#782B13

RGB

rgb(120, 43, 19)

HSL

hsl(14, 73%, 27%)

HSB

hsb(14, 84%, 47%)

CMYK

cmyk(0%, 64%, 84%, 53%)

Oklch

oklch(39.9% 0.114 37.2)

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

#8F2B0A

Tangerine · Brown · Amber Brown

HEX

#8F2B0A

RGB

rgb(143, 43, 10)

HSL

hsl(15, 87%, 30%)

HSB

hsb(15, 93%, 56%)

CMYK

cmyk(0%, 70%, 93%, 44%)

Oklch

oklch(43.9% 0.141 36.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

543B33

324A52

Analogous

52323A

543B33

524A32

Triadic

543B33

32523A

3A3252

Split-Comp.

543B33

32524A

323A52

Tetradic

543B33

3A5232

324A52

4A3252

Contrast Matrix WCAG 2.1 Contrast

543B33	523226	63301F	782B13	8F2B0A
—	1.1 Fail	1.0 Fail	1.1 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.0 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.1 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.2 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

10.2AAA

11.4AAA

10.6AAA

9.8AAA

8.3AAA

Black BG

2.1Fail

1.8Fail

2.0Fail

2.2Fail

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

494935

444429

4D4C23

575619

646312

Deuteranopia

4B4D35

46482A

505424

5B611A

6A7114

Tritanopia

533637

502B2C

602627

741D1E

8A181A

Achromatopsia

424242

3A3A3A

3D3D3D

3F3F3F

454545

Shades & Tints Shades & Tints

#543B33

Dark

Light

#523226

Dark

Light

#63301F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #543b33;
  --color-2: #523226;
  --color-3: #63301f;
  --color-4: #782b13;
  --color-5: #8f2b0a;
}

SCSS

$color-1: #543b33;
$color-2: #523226;
$color-3: #63301f;
$color-4: #782b13;
$color-5: #8f2b0a;

TAILWIND

colors: {
  'brand-1': '#543b33',
  'brand-2': '#523226',
  'brand-3': '#63301f',
  'brand-4': '#782b13',
  'brand-5': '#8f2b0a',
}

RGB Array

[84, 59, 51], [82, 50, 38], [99, 48, 31], [120, 43, 19], [143, 43, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #543B33, #523226, #63301F, #782B13, #8F2B0A 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: #543b33; --color-2: #523226; --color-3: #63301f; --color-4: #782b13; --color-5: #8f2b0a. 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