← Back to Editor

#7B6980 · #60A079 · #52D06D · #45FF61 · #7CE667

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7B6980

Dark Plum · Gray · Violet

HEX
#7B6980
RGB
rgb(123, 105, 128)
HSL
hsl(287, 10%, 46%)
HSB
hsb(287, 18%, 50%)
CMYK
cmyk(4%, 18%, 0%, 50%)
Oklch
oklch(54.6% 0.041 318.8)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#60A079

Celadon · CadetBlue · Olive Green

HEX
#60A079
RGB
rgb(96, 160, 121)
HSL
hsl(143, 25%, 50%)
HSB
hsb(143, 40%, 63%)
CMYK
cmyk(40%, 0%, 24%, 37%)
Oklch
oklch(65.2% 0.089 156.2)

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

#52D06D

Emerald · MediumSeaGreen · Olive Green

HEX
#52D06D
RGB
rgb(82, 208, 109)
HSL
hsl(133, 57%, 57%)
HSB
hsb(133, 61%, 82%)
CMYK
cmyk(61%, 0%, 48%, 18%)
Oklch
oklch(76.4% 0.178 147.8)

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

#45FF61

Emerald · LimeGreen · Apple Green

HEX
#45FF61
RGB
rgb(69, 255, 97)
HSL
hsl(129, 100%, 64%)
HSB
hsb(129, 73%, 100%)
CMYK
cmyk(73%, 0%, 62%, 0%)
Oklch
oklch(87.8% 0.249 145.2)

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

#7CE667

Emerald · LightGreen · Apple Green

HEX
#7CE667
RGB
rgb(124, 230, 103)
HSL
hsl(110, 72%, 65%)
HSB
hsb(110, 55%, 90%)
CMYK
cmyk(46%, 0%, 55%, 10%)
Oklch
oklch(83.4% 0.193 140.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B6980
6F816A

Analogous

706A81
7B6980
816A7A

Triadic

7B6980
817C6A
6A817C

Split-Comp.

7B6980
7A816A
6A8170

Tetradic

7B6980
81706A
6F816A
6A7A81

Contrast Matrix WCAG 2.1 Contrast

7B6980
60A079
52D06D
45FF61
7CE667
—
1.6
Fail
2.5
Fail
3.8
AA Large
3.2
AA Large
1.6
Fail
—
1.6
Fail
2.3
Fail
2.0
Fail
2.5
Fail
1.6
Fail
—
1.5
Fail
1.3
Fail
3.8
AA Large
2.3
Fail
1.5
Fail
—
1.2
Fail
3.2
AA Large
2.0
Fail
1.3
Fail
1.2
Fail
—
White BG
5.0AA
3.1AA Large
2.0Fail
1.3Fail
1.6Fail
Black BG
4.2AA Large
6.8AA
10.6AAA
15.7AAA
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

73737A
7C7C82
898A85
969787
AAAB86

Deuteranopia

747679
787385
81788B
8B7D90
A49C8D

Tritanopia

7A7675
638A8C
58989C
4EA5AC
819EA3

Achromatopsia

717171
888888
9F9F9F
B5B5B5
B8B8B8

Shades & Tints Shades & Tints

#7B6980

Dark
Light

#60A079

Dark
Light

#52D06D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b6980;
  --color-2: #60a079;
  --color-3: #52d06d;
  --color-4: #45ff61;
  --color-5: #7ce667;
}

SCSS

$color-1: #7b6980;
$color-2: #60a079;
$color-3: #52d06d;
$color-4: #45ff61;
$color-5: #7ce667;

TAILWIND

colors: {
  'brand-1': '#7b6980',
  'brand-2': '#60a079',
  'brand-3': '#52d06d',
  'brand-4': '#45ff61',
  'brand-5': '#7ce667',
}

RGB Array

[123, 105, 128], [96, 160, 121], [82, 208, 109], [69, 255, 97], [124, 230, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B6980, #60A079, #52D06D, #45FF61, #7CE667 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: #7b6980; --color-2: #60a079; --color-3: #52d06d; --color-4: #45ff61; --color-5: #7ce667. 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