← Back to Editor

#ADAC5D · #818D80 · #A38256 · #D6741E · #EA6E03

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

#ADAC5D

Autumn Sage · Tan · Sunflower

HEX
#ADAC5D
RGB
rgb(173, 172, 93)
HSL
hsl(59, 33%, 52%)
HSB
hsb(59, 46%, 68%)
CMYK
cmyk(0%, 1%, 46%, 32%)
Oklch
oklch(72.8% 0.102 108.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#818D80

Ash · Gray · Warm Gray

HEX
#818D80
RGB
rgb(129, 141, 128)
HSL
hsl(115, 5%, 53%)
HSB
hsb(115, 9%, 55%)
CMYK
cmyk(9%, 0%, 9%, 45%)
Oklch
oklch(63.0% 0.024 143.1)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#A38256

Ochre · Gray · Amber Brown

HEX
#A38256
RGB
rgb(163, 130, 86)
HSL
hsl(34, 31%, 49%)
HSB
hsb(34, 47%, 64%)
CMYK
cmyk(0%, 20%, 47%, 36%)
Oklch
oklch(62.8% 0.073 73.8)

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

#D6741E

Tangerine · Chocolate · Amber Brown

HEX
#D6741E
RGB
rgb(214, 116, 30)
HSL
hsl(28, 75%, 48%)
HSB
hsb(28, 86%, 84%)
CMYK
cmyk(0%, 46%, 86%, 16%)
Oklch
oklch(65.8% 0.152 55.2)

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

#EA6E03

Tangerine · Chocolate · Amber Brown

HEX
#EA6E03
RGB
rgb(234, 110, 3)
HSL
hsl(28, 97%, 46%)
HSB
hsb(28, 99%, 92%)
CMYK
cmyk(0%, 53%, 99%, 8%)
Oklch
oklch(67.6% 0.178 49.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADAC5D
5C5EAD

Analogous

AD835C
ADAC5D
86AD5C

Triadic

ADAC5D
5CADAC
AC5CAD

Split-Comp.

ADAC5D
5C86AD
835CAD

Tetradic

ADAC5D
5CAD83
5C5EAD
AD5C86

Contrast Matrix WCAG 2.1 Contrast

ADAC5D
818D80
A38256
D6741E
EA6E03
—
1.5
Fail
1.5
Fail
1.4
Fail
1.3
Fail
1.5
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.5
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.4
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
White BG
2.4Fail
3.5AA Large
3.6AA Large
3.3AA Large
3.1AA Large
Black BG
8.8AAA
6.1AA
5.9AA
6.4AA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAD70
868683
959461
ACAB33
B4B31D

Deuteranopia

ADAD75
868584
979963
B1B938
BCC523

Tritanopia

AD7F83
828686
A1696B
D14347
E43136

Achromatopsia

A3A3A3
888888
878787
878787
878787

Shades & Tints Shades & Tints

#ADAC5D

Dark
Light

#818D80

Dark
Light

#A38256

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #adac5d;
  --color-2: #818d80;
  --color-3: #a38256;
  --color-4: #d6741e;
  --color-5: #ea6e03;
}

SCSS

$color-1: #adac5d;
$color-2: #818d80;
$color-3: #a38256;
$color-4: #d6741e;
$color-5: #ea6e03;

TAILWIND

colors: {
  'brand-1': '#adac5d',
  'brand-2': '#818d80',
  'brand-3': '#a38256',
  'brand-4': '#d6741e',
  'brand-5': '#ea6e03',
}

RGB Array

[173, 172, 93], [129, 141, 128], [163, 130, 86], [214, 116, 30], [234, 110, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #ADAC5D, #818D80, #A38256, #D6741E, #EA6E03 is ideal for: corporate websites, product showcases, portfolios. 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: #adac5d; --color-2: #818d80; --color-3: #a38256; --color-4: #d6741e; --color-5: #ea6e03. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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