← Back to Editor

#8A422A · #783C33 · #663C37 · #593F3B · #473F3A

warm

A 5-color warm 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

#8A422A

Tangerine · Sienna · Amber Brown

HEX
#8A422A
RGB
rgb(138, 66, 42)
HSL
hsl(15, 53%, 35%)
HSB
hsb(15, 70%, 54%)
CMYK
cmyk(0%, 52%, 70%, 46%)
Oklch
oklch(46.7% 0.105 38.9)

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

#783C33

Crimson · Sienna · Wine Red

HEX
#783C33
RGB
rgb(120, 60, 51)
HSL
hsl(8, 40%, 34%)
HSB
hsb(8, 57%, 47%)
CMYK
cmyk(0%, 50%, 58%, 53%)
Oklch
oklch(43.1% 0.086 29.9)

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

#663C37

Crimson · DarkOliveGreen · Wine Red

HEX
#663C37
RGB
rgb(102, 60, 55)
HSL
hsl(6, 30%, 31%)
HSB
hsb(6, 46%, 40%)
CMYK
cmyk(0%, 41%, 46%, 60%)
Oklch
oklch(40.5% 0.060 27.3)

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

#593F3B

Crimson · DarkOliveGreen · Wine Red

HEX
#593F3B
RGB
rgb(89, 63, 59)
HSL
hsl(8, 20%, 29%)
HSB
hsb(8, 34%, 35%)
CMYK
cmyk(0%, 29%, 34%, 65%)
Oklch
oklch(39.5% 0.037 28.7)

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

#473F3A

Tangerine · DarkSlateGray · Cinnamon

HEX
#473F3A
RGB
rgb(71, 63, 58)
HSL
hsl(23, 10%, 25%)
HSB
hsb(23, 18%, 28%)
CMYK
cmyk(0%, 11%, 18%, 72%)
Oklch
oklch(37.4% 0.014 54.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8A422A
2A7189

Analogous

892A42
8A422A
89712A

Triadic

8A422A
2A8942
422A89

Split-Comp.

8A422A
2A8971
2A4289

Tetradic

8A422A
42892A
2A7189
712A89

Contrast Matrix WCAG 2.1 Contrast

8A422A
783C33
663C37
593F3B
473F3A
—
1.2
Fail
1.3
Fail
1.3
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
White BG
7.3AAA
8.4AAA
9.3AAA
9.6AAA
10.3AAA
Black BG
2.9Fail
2.5Fail
2.3Fail
2.2Fail
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6A30
5E5D35
545338
4E4E3C
44433B

Deuteranopia

6F7431
626636
565939
4F513C
44453B

Tritanopia

863435
753737
643939
583D3D
473C3C

Achromatopsia

555555
4D4D4D
484848
464646
414141

Shades & Tints Shades & Tints

#8A422A

Dark
Light

#783C33

Dark
Light

#663C37

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8a422a;
  --color-2: #783c33;
  --color-3: #663c37;
  --color-4: #593f3b;
  --color-5: #473f3a;
}

SCSS

$color-1: #8a422a;
$color-2: #783c33;
$color-3: #663c37;
$color-4: #593f3b;
$color-5: #473f3a;

TAILWIND

colors: {
  'brand-1': '#8a422a',
  'brand-2': '#783c33',
  'brand-3': '#663c37',
  'brand-4': '#593f3b',
  'brand-5': '#473f3a',
}

RGB Array

[138, 66, 42], [120, 60, 51], [102, 60, 55], [89, 63, 59], [71, 63, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #8A422A, #783C33, #663C37, #593F3B, #473F3A 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: #8a422a; --color-2: #783c33; --color-3: #663c37; --color-4: #593f3b; --color-5: #473f3a. 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 warm-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