← Back to Editor

#AABB88 · #FA5928 · #8B9A68 · #B8C416 · #E6C667

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

#AABB88

Willow Green · DarkSeaGreen · Apple Green

HEX
#AABB88
RGB
rgb(170, 187, 136)
HSL
hsl(80, 27%, 63%)
HSB
hsb(80, 27%, 73%)
CMYK
cmyk(9%, 0%, 27%, 27%)
Oklch
oklch(76.6% 0.072 123.1)

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

#FA5928

Vermilion · Tomato · Passion Red

HEX
#FA5928
RGB
rgb(250, 89, 40)
HSL
hsl(14, 95%, 57%)
HSB
hsb(14, 84%, 98%)
CMYK
cmyk(0%, 64%, 84%, 2%)
Oklch
oklch(67.4% 0.205 36.5)

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

#8B9A68

Grass Green · Gray · Olive Green

HEX
#8B9A68
RGB
rgb(139, 154, 104)
HSL
hsl(78, 20%, 51%)
HSB
hsb(78, 32%, 60%)
CMYK
cmyk(10%, 0%, 32%, 40%)
Oklch
oklch(66.1% 0.072 122.0)

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

#B8C416

Autumn Sage · GoldenRod · Honey Gold

HEX
#B8C416
RGB
rgb(184, 196, 22)
HSL
hsl(64, 80%, 43%)
HSB
hsb(64, 89%, 77%)
CMYK
cmyk(6%, 0%, 89%, 23%)
Oklch
oklch(78.5% 0.173 114.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#E6C667

Ginger · BurlyWood · Sunflower

HEX
#E6C667
RGB
rgb(230, 198, 103)
HSL
hsl(45, 72%, 65%)
HSB
hsb(45, 55%, 90%)
CMYK
cmyk(0%, 14%, 55%, 10%)
Oklch
oklch(83.5% 0.120 91.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AABB88
9887BA

Analogous

BAB287
AABB88
90BA87

Triadic

AABB88
87A9BA
BA87A9

Split-Comp.

AABB88
8790BA
B287BA

Tetradic

AABB88
87BAB2
9887BA
BA8790

Contrast Matrix WCAG 2.1 Contrast

AABB88
FA5928
8B9A68
B8C416
E6C667
—
1.6
Fail
1.5
Fail
1.1
Fail
1.2
Fail
1.6
Fail
—
1.1
Fail
1.7
Fail
1.9
Fail
1.5
Fail
1.1
Fail
—
1.6
Fail
1.8
Fail
1.1
Fail
1.7
Fail
1.6
Fail
—
1.2
Fail
1.2
Fail
1.9
Fail
1.8
Fail
1.2
Fail
—
White BG
2.1Fail
3.2AA Large
3.0AA Large
1.9Fail
1.7Fail
Black BG
10.2AAA
6.5AA
6.9AA
10.9AAA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B294
B4B334
919274
BDBD40
D8D87E

Deuteranopia

B0AF97
BECA37
919077
BDBC4A
DADC84

Tritanopia

AB9EA0
F23D3F
8C7E80
B96169
E49094

Achromatopsia

B0B0B0
848484
909090
ADADAD
C5C5C5

Shades & Tints Shades & Tints

#AABB88

Dark
Light

#FA5928

Dark
Light

#8B9A68

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aabb88;
  --color-2: #fa5928;
  --color-3: #8b9a68;
  --color-4: #b8c416;
  --color-5: #e6c667;
}

SCSS

$color-1: #aabb88;
$color-2: #fa5928;
$color-3: #8b9a68;
$color-4: #b8c416;
$color-5: #e6c667;

TAILWIND

colors: {
  'brand-1': '#aabb88',
  'brand-2': '#fa5928',
  'brand-3': '#8b9a68',
  'brand-4': '#b8c416',
  'brand-5': '#e6c667',
}

RGB Array

[170, 187, 136], [250, 89, 40], [139, 154, 104], [184, 196, 22], [230, 198, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AABB88, #FA5928, #8B9A68, #B8C416, #E6C667 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: #aabb88; --color-2: #fa5928; --color-3: #8b9a68; --color-4: #b8c416; --color-5: #e6c667. 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