← Back to Editor

#A4AE89 · #9C8E71 · #A1804B · #AB6E38 · #CD3510

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

#A4AE89

Willow Green · DarkSeaGreen · Apple Green

HEX
#A4AE89
RGB
rgb(164, 174, 137)
HSL
hsl(76, 19%, 61%)
HSB
hsb(76, 21%, 68%)
CMYK
cmyk(6%, 0%, 21%, 32%)
Oklch
oklch(73.3% 0.053 120.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#9C8E71

Ginger · Gray · Sunflower

HEX
#9C8E71
RGB
rgb(156, 142, 113)
HSL
hsl(40, 18%, 53%)
HSB
hsb(40, 28%, 61%)
CMYK
cmyk(0%, 9%, 28%, 39%)
Oklch
oklch(65.1% 0.044 85.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#A1804B

Ochre · Sienna · Amber Brown

HEX
#A1804B
RGB
rgb(161, 128, 75)
HSL
hsl(37, 36%, 46%)
HSB
hsb(37, 53%, 63%)
CMYK
cmyk(0%, 20%, 53%, 37%)
Oklch
oklch(62.0% 0.082 78.2)

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

#AB6E38

Tangerine · Sienna · Amber Brown

HEX
#AB6E38
RGB
rgb(171, 110, 56)
HSL
hsl(28, 51%, 45%)
HSB
hsb(28, 67%, 67%)
CMYK
cmyk(0%, 36%, 67%, 33%)
Oklch
oklch(59.3% 0.104 60.1)

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

#CD3510

Vermilion · FireBrick · Passion Red

HEX
#CD3510
RGB
rgb(205, 53, 16)
HSL
hsl(12, 86%, 43%)
HSB
hsb(12, 92%, 80%)
CMYK
cmyk(0%, 74%, 92%, 20%)
Oklch
oklch(56.0% 0.194 33.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A4AE89
9389AE

Analogous

AEA689
A4AE89
91AE89

Triadic

A4AE89
89A4AE
AE89A4

Split-Comp.

A4AE89
8991AE
A689AE

Tetradic

A4AE89
89AEA6
9389AE
AE8991

Contrast Matrix WCAG 2.1 Contrast

A4AE89
9C8E71
A1804B
AB6E38
CD3510
—
1.4
Fail
1.6
Fail
1.8
Fail
2.2
Fail
1.4
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.8
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
2.2
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
2.3Fail
3.2AA Large
3.7AA Large
4.2AA Large
5.1AA
Black BG
9.0AAA
6.5AA
5.7AA
5.0AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A892
969678
939258
919045
8B8A19

Deuteranopia

A8A794
97987A
95975B
949948
949F1B

Tritanopia

A4999B
9B7E7F
9F6264
A84F52
C52022

Achromatopsia

A7A7A7
8F8F8F
848484
7A7A7A
5E5E5E

Shades & Tints Shades & Tints

#A4AE89

Dark
Light

#9C8E71

Dark
Light

#A1804B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a4ae89;
  --color-2: #9c8e71;
  --color-3: #a1804b;
  --color-4: #ab6e38;
  --color-5: #cd3510;
}

SCSS

$color-1: #a4ae89;
$color-2: #9c8e71;
$color-3: #a1804b;
$color-4: #ab6e38;
$color-5: #cd3510;

TAILWIND

colors: {
  'brand-1': '#a4ae89',
  'brand-2': '#9c8e71',
  'brand-3': '#a1804b',
  'brand-4': '#ab6e38',
  'brand-5': '#cd3510',
}

RGB Array

[164, 174, 137], [156, 142, 113], [161, 128, 75], [171, 110, 56], [205, 53, 16]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #A4AE89, #9C8E71, #A1804B, #AB6E38, #CD3510 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: #a4ae89; --color-2: #9c8e71; --color-3: #a1804b; --color-4: #ab6e38; --color-5: #cd3510. 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