← Back to Editor

#A7B828 · #77B3CD · #C686EB · #F073B6 · #EB9A49

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#A7B828

Autumn Sage · GoldenRod · Honey Gold

HEX
#A7B828
RGB
rgb(167, 184, 40)
HSL
hsl(67, 64%, 44%)
HSB
hsb(67, 78%, 72%)
CMYK
cmyk(9%, 0%, 78%, 28%)
Oklch
oklch(74.5% 0.159 116.5)

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

#77B3CD

Sky Blue · SkyBlue · Lake Green

HEX
#77B3CD
RGB
rgb(119, 179, 205)
HSL
hsl(198, 46%, 64%)
HSB
hsb(198, 42%, 80%)
CMYK
cmyk(42%, 13%, 0%, 20%)
Oklch
oklch(73.5% 0.072 227.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#C686EB

Lilac · Orchid · Lilac Purple

HEX
#C686EB
RGB
rgb(198, 134, 235)
HSL
hsl(278, 72%, 72%)
HSB
hsb(278, 43%, 92%)
CMYK
cmyk(16%, 43%, 0%, 8%)
Oklch
oklch(72.2% 0.156 312.2)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#F073B6

Mauve · Orchid · Rose Pink

HEX
#F073B6
RGB
rgb(240, 115, 182)
HSL
hsl(328, 81%, 70%)
HSB
hsb(328, 52%, 94%)
CMYK
cmyk(0%, 52%, 24%, 6%)
Oklch
oklch(72.1% 0.170 348.9)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#EB9A49

Ginger · SandyBrown · Warm Sun

HEX
#EB9A49
RGB
rgb(235, 154, 73)
HSL
hsl(30, 80%, 60%)
HSB
hsb(30, 69%, 92%)
CMYK
cmyk(0%, 34%, 69%, 8%)
Oklch
oklch(75.3% 0.136 62.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7B828
3928B8

Analogous

B88128
A7B828
5FB828

Triadic

A7B828
28A7B8
B828A7

Split-Comp.

A7B828
285FB8
8128B8

Tetradic

A7B828
28B881
3928B8
B8285F

Contrast Matrix WCAG 2.1 Contrast

A7B828
77B3CD
C686EB
F073B6
EB9A49
—
1.0
Fail
1.2
Fail
1.2
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.0
Fail
—
1.2
Fail
1.0
Fail
1.0
Fail
1.2
Fail
1.2
Fail
—
White BG
2.2Fail
2.3Fail
2.6Fail
2.7Fail
2.3Fail
Black BG
9.5AAA
9.1AAA
8.0AAA
7.8AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAF4B
9192C7
AAAAD3
BAB9A6
C8C75D

Deuteranopia

ADAC53
8E89C5
AEB3CD
C1CBA2
CDD361

Tritanopia

A8666C
7AC2C1
C3BFBB
EA9996
E76C6F

Achromatopsia

A3A3A3
A4A4A4
A5A5A5
A0A0A0
A9A9A9

Shades & Tints Shades & Tints

#A7B828

Dark
Light

#77B3CD

Dark
Light

#C686EB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7b828;
  --color-2: #77b3cd;
  --color-3: #c686eb;
  --color-4: #f073b6;
  --color-5: #eb9a49;
}

SCSS

$color-1: #a7b828;
$color-2: #77b3cd;
$color-3: #c686eb;
$color-4: #f073b6;
$color-5: #eb9a49;

TAILWIND

colors: {
  'brand-1': '#a7b828',
  'brand-2': '#77b3cd',
  'brand-3': '#c686eb',
  'brand-4': '#f073b6',
  'brand-5': '#eb9a49',
}

RGB Array

[167, 184, 40], [119, 179, 205], [198, 134, 235], [240, 115, 182], [235, 154, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7B828, #77B3CD, #C686EB, #F073B6, #EB9A49 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #a7b828; --color-2: #77b3cd; --color-3: #c686eb; --color-4: #f073b6; --color-5: #eb9a49. 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 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