#A03A12 + #741616 + #501F0C + #3A2319 + #4D362C · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A03A12

Tangerine · Brown · Amber Brown

HEX

#A03A12

RGB

rgb(160, 58, 18)

HSL

hsl(17, 80%, 35%)

HSB

hsb(17, 89%, 63%)

CMYK

cmyk(0%, 64%, 89%, 37%)

Oklch

oklch(48.8% 0.144 39.2)

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

#741616

Vermilion · Maroon · Wine Red

HEX

#741616

RGB

rgb(116, 22, 22)

HSL

hsl(0, 68%, 27%)

HSB

hsb(0, 81%, 45%)

CMYK

cmyk(0%, 81%, 81%, 55%)

Oklch

oklch(36.7% 0.128 26.3)

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

#501F0C

Tangerine · Maroon · Cinnamon

HEX

#501F0C

RGB

rgb(80, 31, 12)

HSL

hsl(17, 74%, 18%)

HSB

hsb(17, 85%, 31%)

CMYK

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

Oklch

oklch(30.9% 0.079 40.4)

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

#3A2319

Tangerine · DarkSlateGray · Cinnamon

HEX

#3A2319

RGB

rgb(58, 35, 25)

HSL

hsl(18, 40%, 16%)

HSB

hsb(18, 57%, 23%)

CMYK

cmyk(0%, 40%, 57%, 77%)

Oklch

oklch(28.3% 0.040 44.2)

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

#4D362C

Tangerine · DarkSlateGray · Cinnamon

HEX

#4D362C

RGB

rgb(77, 54, 44)

HSL

hsl(18, 27%, 24%)

HSB

hsb(18, 43%, 30%)

CMYK

cmyk(0%, 30%, 43%, 70%)

Oklch

oklch(35.6% 0.037 44.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A03A12

1278A1

Analogous

A11231

A03A12

A18212

Triadic

A03A12

12A13A

3A12A1

Split-Comp.

A03A12

12A182

1231A1

Tetradic

A03A12

31A112

1278A1

8212A1

Contrast Matrix WCAG 2.1 Contrast

A03A12	741616	501F0C	3A2319	4D362C
—	1.7 Fail	2.0 Fail	2.2 Fail	1.7 Fail
1.7 Fail	—	1.2 Fail	1.3 Fail	1.0 Fail
2.0 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
2.2 Fail	1.3 Fail	1.1 Fail	—	1.3 Fail
1.7 Fail	1.0 Fail	1.2 Fail	1.3 Fail	—

White BG

6.8AA

11.2AAA

13.6AAA

14.6AAA

11.2AAA

Black BG

3.1AA Large

1.9Fail

1.5Fail

1.4Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

74731C

4B4A16

3B3A11

30301B

43432E

Deuteranopia

7A811E

515816

3E4112

31331C

44462F

Tritanopia

9B2325

6F1616

4E1415

391D1E

4C3031

Achromatopsia

545454

323232

2B2B2B

292929

3C3C3C

Shades & Tints Shades & Tints

#A03A12

Dark

Light

#741616

Dark

Light

#501F0C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a03a12;
  --color-2: #741616;
  --color-3: #501f0c;
  --color-4: #3a2319;
  --color-5: #4d362c;
}

SCSS

$color-1: #a03a12;
$color-2: #741616;
$color-3: #501f0c;
$color-4: #3a2319;
$color-5: #4d362c;

TAILWIND

colors: {
  'brand-1': '#a03a12',
  'brand-2': '#741616',
  'brand-3': '#501f0c',
  'brand-4': '#3a2319',
  'brand-5': '#4d362c',
}

RGB Array

[160, 58, 18], [116, 22, 22], [80, 31, 12], [58, 35, 25], [77, 54, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #A03A12, #741616, #501F0C, #3A2319, #4D362C 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: #a03a12; --color-2: #741616; --color-3: #501f0c; --color-4: #3a2319; --color-5: #4d362c. 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