#A85808 + #7A2A01 + #5E3A14 + #302D21 + #121316 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A85808

Ochre · Sienna · Amber Brown

HEX

#A85808

RGB

rgb(168, 88, 8)

HSL

hsl(30, 91%, 35%)

HSB

hsb(30, 95%, 66%)

CMYK

cmyk(0%, 48%, 95%, 34%)

Oklch

oklch(54.6% 0.131 55.9)

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

#7A2A01

Tangerine · Maroon · Cinnamon

HEX

#7A2A01

RGB

rgb(122, 42, 1)

HSL

hsl(20, 98%, 24%)

HSB

hsb(20, 99%, 48%)

CMYK

cmyk(0%, 66%, 99%, 52%)

Oklch

oklch(40.0% 0.121 41.7)

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

#5E3A14

Ochre · DarkOliveGreen · Cinnamon

HEX

#5E3A14

RGB

rgb(94, 58, 20)

HSL

hsl(31, 65%, 22%)

HSB

hsb(31, 79%, 37%)

CMYK

cmyk(0%, 38%, 79%, 63%)

Oklch

oklch(38.4% 0.072 63.7)

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

#302D21

Ochre · DarkSlateGray · Amber Gold

HEX

#302D21

RGB

rgb(48, 45, 33)

HSL

hsl(48, 19%, 16%)

HSB

hsb(48, 31%, 19%)

CMYK

cmyk(0%, 6%, 31%, 81%)

Oklch

oklch(29.6% 0.021 95.7)

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

#121316

Indigo · Black · Deep Sea Blue

HEX

#121316

RGB

rgb(18, 19, 22)

HSL

hsl(225, 10%, 8%)

HSB

hsb(225, 18%, 9%)

CMYK

cmyk(18%, 14%, 0%, 91%)

Oklch

oklch(18.7% 0.006 271.1)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A85808

0859AA

Analogous

AA0808

A85808

AAAA08

Triadic

A85808

08AA59

5908AA

Split-Comp.

A85808

08AAAA

0808AA

Tetradic

A85808

08AA08

0859AA

AA08AA

Contrast Matrix WCAG 2.1 Contrast

A85808	7A2A01	5E3A14	302D21	121316
—	1.9 Fail	1.9 Fail	2.7 Fail	3.6 AA Large
1.9 Fail	—	1.0 Fail	1.4 Fail	1.9 Fail
1.9 Fail	1.0 Fail	—	1.4 Fail	1.8 Fail
2.7 Fail	1.4 Fail	1.4 Fail	—	1.3 Fail
3.6 AA Large	1.9 Fail	1.8 Fail	1.3 Fail	—

White BG

5.2AA

9.7AAA

10.0AAA

13.8AAA

18.6AAA

Black BG

4.1AA Large

2.2Fail

2.1Fail

1.5Fail

1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

85851B

57570B

4E4E1D

2F2F24

121215

Deuteranopia

8A9020

5C620D

51531F

2F2F25

121215

Tritanopia

A42B2E

761314

5C2426

302627

121515

Achromatopsia

676767

3D3D3D

404040

2D2D2D

131313

Shades & Tints Shades & Tints

#A85808

Dark

Light

#7A2A01

Dark

Light

#5E3A14

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a85808;
  --color-2: #7a2a01;
  --color-3: #5e3a14;
  --color-4: #302d21;
  --color-5: #121316;
}

SCSS

$color-1: #a85808;
$color-2: #7a2a01;
$color-3: #5e3a14;
$color-4: #302d21;
$color-5: #121316;

TAILWIND

colors: {
  'brand-1': '#a85808',
  'brand-2': '#7a2a01',
  'brand-3': '#5e3a14',
  'brand-4': '#302d21',
  'brand-5': '#121316',
}

RGB Array

[168, 88, 8], [122, 42, 1], [94, 58, 20], [48, 45, 33], [18, 19, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #A85808, #7A2A01, #5E3A14, #302D21, #121316 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: #a85808; --color-2: #7a2a01; --color-3: #5e3a14; --color-4: #302d21; --color-5: #121316. 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