← Back to Editor

#7880A8 · #4A9EBE · #1BC2C2 · #53E6BD · #E8E4D7

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#7880A8

Azure · LightSlateGray · Navy Blue

HEX
#7880A8
RGB
rgb(120, 128, 168)
HSL
hsl(230, 22%, 56%)
HSB
hsb(230, 29%, 66%)
CMYK
cmyk(29%, 24%, 0%, 34%)
Oklch
oklch(60.8% 0.062 275.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#4A9EBE

Slate Blue · SteelBlue · Lake Green

HEX
#4A9EBE
RGB
rgb(74, 158, 190)
HSL
hsl(197, 47%, 52%)
HSB
hsb(197, 61%, 75%)
CMYK
cmyk(61%, 17%, 0%, 25%)
Oklch
oklch(66.0% 0.094 225.9)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#1BC2C2

Lake Blue · LightSeaGreen · Mint Ice

HEX
#1BC2C2
RGB
rgb(27, 194, 194)
HSL
hsl(180, 76%, 43%)
HSB
hsb(180, 86%, 76%)
CMYK
cmyk(86%, 0%, 0%, 24%)
Oklch
oklch(73.9% 0.122 194.8)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#53E6BD

Jade · Turquoise · Lake Green

HEX
#53E6BD
RGB
rgb(83, 230, 189)
HSL
hsl(163, 75%, 61%)
HSB
hsb(163, 64%, 90%)
CMYK
cmyk(64%, 0%, 18%, 10%)
Oklch
oklch(83.6% 0.138 170.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#E8E4D7

Goose Yellow · Beige · Lemon Cream

HEX
#E8E4D7
RGB
rgb(232, 228, 215)
HSL
hsl(46, 27%, 88%)
HSB
hsb(46, 7%, 91%)
CMYK
cmyk(0%, 2%, 7%, 9%)
Oklch
oklch(91.8% 0.018 92.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7880A8
A79F76

Analogous

7697A7
7880A8
8776A7

Triadic

7880A8
A7767E
7EA776

Split-Comp.

7880A8
A78776
97A776

Tetradic

7880A8
A77697
A79F76
76A787

Contrast Matrix WCAG 2.1 Contrast

7880A8
4A9EBE
1BC2C2
53E6BD
E8E4D7
—
1.3
Fail
1.8
Fail
2.5
Fail
3.0
AA Large
1.3
Fail
—
1.4
Fail
1.9
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
1.7
Fail
2.5
Fail
1.9
Fail
1.4
Fail
—
1.2
Fail
3.0
AA Large
2.4
Fail
1.7
Fail
1.2
Fail
—
White BG
3.9AA Large
3.0AA Large
2.2Fail
1.6Fail
1.3Fail
Black BG
5.5AA
6.9AA
9.5AAA
13.4AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7C9E
6E6FB6
6365C2
9394C7
E6E6DA

Deuteranopia

7B7A9C
6A63B4
5A4DC2
8A7FC9
E7E7DB

Tritanopia

789795
4EB0AF
23C2C2
5ACFD0
E8DDDD

Achromatopsia

828282
898989
909090
B5B5B5
E4E4E4

Shades & Tints Shades & Tints

#7880A8

Dark
Light

#4A9EBE

Dark
Light

#1BC2C2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7880a8;
  --color-2: #4a9ebe;
  --color-3: #1bc2c2;
  --color-4: #53e6bd;
  --color-5: #e8e4d7;
}

SCSS

$color-1: #7880a8;
$color-2: #4a9ebe;
$color-3: #1bc2c2;
$color-4: #53e6bd;
$color-5: #e8e4d7;

TAILWIND

colors: {
  'brand-1': '#7880a8',
  'brand-2': '#4a9ebe',
  'brand-3': '#1bc2c2',
  'brand-4': '#53e6bd',
  'brand-5': '#e8e4d7',
}

RGB Array

[120, 128, 168], [74, 158, 190], [27, 194, 194], [83, 230, 189], [232, 228, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7880A8, #4A9EBE, #1BC2C2, #53E6BD, #E8E4D7 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #7880a8; --color-2: #4a9ebe; --color-3: #1bc2c2; --color-4: #53e6bd; --color-5: #e8e4d7. 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 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