← Back to Editor

#A4AB80 · #8C6767 · #A64740 · #F25D0C · #FA9425

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

#A4AB80

Grass Green · DarkSeaGreen · Olive Green

HEX
#A4AB80
RGB
rgb(164, 171, 128)
HSL
hsl(70, 20%, 59%)
HSB
hsb(70, 25%, 67%)
CMYK
cmyk(4%, 0%, 25%, 33%)
Oklch
oklch(72.4% 0.060 115.4)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#8C6767

Crimson · DimGray · Passion Red

HEX
#8C6767
RGB
rgb(140, 103, 103)
HSL
hsl(0, 15%, 48%)
HSB
hsb(0, 26%, 55%)
CMYK
cmyk(0%, 26%, 26%, 45%)
Oklch
oklch(55.1% 0.048 18.7)

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

#A64740

Crimson · Sienna · Passion Red

HEX
#A64740
RGB
rgb(166, 71, 64)
HSL
hsl(4, 44%, 45%)
HSB
hsb(4, 61%, 65%)
CMYK
cmyk(0%, 57%, 61%, 35%)
Oklch
oklch(52.1% 0.127 26.6)

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

#F25D0C

Tangerine · OrangeRed · Amber Brown

HEX
#F25D0C
RGB
rgb(242, 93, 12)
HSL
hsl(21, 91%, 50%)
HSB
hsb(21, 95%, 95%)
CMYK
cmyk(0%, 62%, 95%, 5%)
Oklch
oklch(66.5% 0.198 41.7)

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

#FA9425

Ginger · GoldenRod · Warm Sun

HEX
#FA9425
RGB
rgb(250, 148, 37)
HSL
hsl(31, 96%, 56%)
HSB
hsb(31, 85%, 98%)
CMYK
cmyk(0%, 41%, 85%, 2%)
Oklch
oklch(75.8% 0.165 61.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A4AB80
8982AB

Analogous

AB9D82
A4AB80
8FAB82

Triadic

A4AB80
82A4AB
AB82A4

Split-Comp.

A4AB80
828FAB
9D82AB

Tetradic

A4AB80
82AB9D
8982AB
AB828F

Contrast Matrix WCAG 2.1 Contrast

A4AB80
8C6767
A64740
F25D0C
FA9425
—
2.1
Fail
2.4
Fail
1.4
Fail
1.1
Fail
2.1
Fail
—
1.2
Fail
1.5
Fail
2.2
Fail
2.4
Fail
1.2
Fail
—
1.8
Fail
2.6
Fail
1.4
Fail
1.5
Fail
1.8
Fail
—
1.5
Fail
1.1
Fail
2.2
Fail
2.6
Fail
1.5
Fail
—
White BG
2.4Fail
4.9AA
5.8AA
3.3AA Large
2.3Fail
Black BG
8.7AAA
4.3AA Large
3.6AA Large
6.3AA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A78A
7C7C67
7D7C42
B1B020
CECD40

Deuteranopia

A7A68D
7E8167
828A42
BAC524
D4DB46

Tritanopia

A49394
8A6767
A14343
EB2F32
F5555A

Achromatopsia

A4A4A4
727272
636363
808080
A6A6A6

Shades & Tints Shades & Tints

#A4AB80

Dark
Light

#8C6767

Dark
Light

#A64740

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a4ab80;
  --color-2: #8c6767;
  --color-3: #a64740;
  --color-4: #f25d0c;
  --color-5: #fa9425;
}

SCSS

$color-1: #a4ab80;
$color-2: #8c6767;
$color-3: #a64740;
$color-4: #f25d0c;
$color-5: #fa9425;

TAILWIND

colors: {
  'brand-1': '#a4ab80',
  'brand-2': '#8c6767',
  'brand-3': '#a64740',
  'brand-4': '#f25d0c',
  'brand-5': '#fa9425',
}

RGB Array

[164, 171, 128], [140, 103, 103], [166, 71, 64], [242, 93, 12], [250, 148, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #A4AB80, #8C6767, #A64740, #F25D0C, #FA9425 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: #a4ab80; --color-2: #8c6767; --color-3: #a64740; --color-4: #f25d0c; --color-5: #fa9425. 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