← Back to Editor

#87B994 · #D9D494 · #AA0E00 · #280B07 · #78430D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#87B994

Celadon · DarkSeaGreen · Apple Green

HEX
#87B994
RGB
rgb(135, 185, 148)
HSL
hsl(136, 26%, 63%)
HSB
hsb(136, 27%, 73%)
CMYK
cmyk(27%, 0%, 20%, 27%)
Oklch
oklch(74.0% 0.075 152.3)

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

#D9D494

Fresh Green · Khaki · Sunflower

HEX
#D9D494
RGB
rgb(217, 212, 148)
HSL
hsl(56, 48%, 72%)
HSB
hsb(56, 32%, 85%)
CMYK
cmyk(0%, 2%, 32%, 15%)
Oklch
oklch(85.9% 0.083 104.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#AA0E00

Vermilion · DarkRed · Wine Red

HEX
#AA0E00
RGB
rgb(170, 14, 0)
HSL
hsl(5, 100%, 33%)
HSB
hsb(5, 100%, 67%)
CMYK
cmyk(0%, 92%, 100%, 33%)
Oklch
oklch(46.8% 0.186 30.3)

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

#280B07

Vermilion · Black · Deep Berry

HEX
#280B07
RGB
rgb(40, 11, 7)
HSL
hsl(7, 70%, 9%)
HSB
hsb(7, 83%, 16%)
CMYK
cmyk(0%, 73%, 83%, 84%)
Oklch
oklch(19.7% 0.050 30.6)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#78430D

Ochre · Sienna · Amber Brown

HEX
#78430D
RGB
rgb(120, 67, 13)
HSL
hsl(30, 80%, 26%)
HSB
hsb(30, 89%, 47%)
CMYK
cmyk(0%, 44%, 89%, 53%)
Oklch
oklch(43.9% 0.096 59.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87B994
B988AC

Analogous

94B988
87B994
88B9AE

Triadic

87B994
9588B9
B99588

Split-Comp.

87B994
AE88B9
B98894

Tetradic

87B994
8894B9
B988AC
B9AE88

Contrast Matrix WCAG 2.1 Contrast

87B994
D9D494
AA0E00
280B07
78430D
—
1.5
Fail
3.4
AA Large
8.2
AAA
3.6
AA Large
1.5
Fail
—
5.0
AA
12.1
AAA
5.3
AA
3.4
AA Large
5.0
AA
—
2.4
Fail
1.1
Fail
8.2
AAA
12.1
AAA
2.4
Fail
—
2.3
Fail
3.6
AA Large
5.3
AA
1.1
Fail
2.3
Fail
—
White BG
2.2Fail
1.5Fail
7.6AAA
18.4AAA
8.1AAA
Black BG
9.4AAA
13.8AAA
2.8Fail
1.1Fail
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9D9D
D7D7A3
666503
1B1B08
61611A

Deuteranopia

9A969F
D7D7A7
707B04
1D1F08
64681D

Tritanopia

8AA4A6
D9B0B2
A20607
270909
752427

Achromatopsia

A6A6A6
CECECE
3B3B3B
131313
4D4D4D

Shades & Tints Shades & Tints

#87B994

Dark
Light

#D9D494

Dark
Light

#AA0E00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87b994;
  --color-2: #d9d494;
  --color-3: #aa0e00;
  --color-4: #280b07;
  --color-5: #78430d;
}

SCSS

$color-1: #87b994;
$color-2: #d9d494;
$color-3: #aa0e00;
$color-4: #280b07;
$color-5: #78430d;

TAILWIND

colors: {
  'brand-1': '#87b994',
  'brand-2': '#d9d494',
  'brand-3': '#aa0e00',
  'brand-4': '#280b07',
  'brand-5': '#78430d',
}

RGB Array

[135, 185, 148], [217, 212, 148], [170, 14, 0], [40, 11, 7], [120, 67, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87B994, #D9D494, #AA0E00, #280B07, #78430D is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #87b994; --color-2: #d9d494; --color-3: #aa0e00; --color-4: #280b07; --color-5: #78430d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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