← Back to Editor

#A2A51A · #AEC1A4 · #D20B00 · #64A482 · #B9C778

A 5-color palette 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

#A2A51A

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A2A51A
RGB
rgb(162, 165, 26)
HSL
hsl(61, 73%, 37%)
HSB
hsb(61, 84%, 65%)
CMYK
cmyk(2%, 0%, 84%, 35%)
Oklch
oklch(69.7% 0.147 111.0)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#AEC1A4

Celadon · DarkGray · Apple Green

HEX
#AEC1A4
RGB
rgb(174, 193, 164)
HSL
hsl(99, 19%, 70%)
HSB
hsb(99, 15%, 76%)
CMYK
cmyk(10%, 0%, 15%, 24%)
Oklch
oklch(78.8% 0.045 134.7)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#D20B00

Vermilion · Red · Passion Red

HEX
#D20B00
RGB
rgb(210, 11, 0)
HSL
hsl(3, 100%, 41%)
HSB
hsb(3, 100%, 82%)
CMYK
cmyk(0%, 95%, 100%, 18%)
Oklch
oklch(54.5% 0.220 29.8)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#64A482

Celadon · CadetBlue · Olive Green

HEX
#64A482
RGB
rgb(100, 164, 130)
HSL
hsl(148, 26%, 52%)
HSB
hsb(148, 39%, 64%)
CMYK
cmyk(39%, 0%, 21%, 36%)
Oklch
oklch(66.6% 0.084 159.8)

TraditionalCeladon」· PaintOlive Green」· Creative Blush Sunrise

#B9C778

Willow Green · Tan · Apple Green

HEX
#B9C778
RGB
rgb(185, 199, 120)
HSL
hsl(71, 41%, 63%)
HSB
hsb(71, 40%, 78%)
CMYK
cmyk(7%, 0%, 40%, 22%)
Oklch
oklch(80.1% 0.104 117.0)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A2A51A
1C19A3

Analogous

A36119
A2A51A
5CA319

Triadic

A2A51A
19A1A3
A319A1

Split-Comp.

A2A51A
195CA3
6119A3

Tetradic

A2A51A
19A361
1C19A3
A3195C

Contrast Matrix WCAG 2.1 Contrast

A2A51A
AEC1A4
D20B00
64A482
B9C778
1.4
Fail
2.1
Fail
1.1
Fail
1.5
Fail
1.4
Fail
2.9
Fail
1.5
Fail
1.0
Fail
2.1
Fail
2.9
Fail
1.9
Fail
3.0
AA Large
1.1
Fail
1.5
Fail
1.9
Fail
1.6
Fail
1.5
Fail
1.0
Fail
3.0
AA Large
1.6
Fail
White BG
2.6Fail
1.9Fail
5.5AA
2.9Fail
1.8Fail
Black BG
7.9AAA
11.0AAA
3.8AA Large
7.2AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A33C
B6B6AB
7C7A03
80808A
BFBF8B

Deuteranopia

A3A344
B5B4AD
879603
7C778C
BEBD90

Tritanopia

A2565C
AFB1B2
C80505
679192
BA9A9E

Achromatopsia

949494
B8B8B8
454545
8D8D8D
BABABA

Shades & Tints Shades & Tints

#A2A51A

Dark
Light

#AEC1A4

Dark
Light

#D20B00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a2a51a;
  --color-2: #aec1a4;
  --color-3: #d20b00;
  --color-4: #64a482;
  --color-5: #b9c778;
}

SCSS

$color-1: #a2a51a;
$color-2: #aec1a4;
$color-3: #d20b00;
$color-4: #64a482;
$color-5: #b9c778;

TAILWIND

colors: {
  'brand-1': '#a2a51a',
  'brand-2': '#aec1a4',
  'brand-3': '#d20b00',
  'brand-4': '#64a482',
  'brand-5': '#b9c778',
}

RGB Array

[162, 165, 26], [174, 193, 164], [210, 11, 0], [100, 164, 130], [185, 199, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A2A51A, #AEC1A4, #D20B00, #64A482, #B9C778 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: #a2a51a; --color-2: #aec1a4; --color-3: #d20b00; --color-4: #64a482; --color-5: #b9c778. 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 general-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