← Back to Editor

#84D07B · #83A47F · #817882 · #7F3787 · #7E0B8B

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

#84D07B

Celadon · DarkSeaGreen · Apple Green

HEX
#84D07B
RGB
rgb(132, 208, 123)
HSL
hsl(114, 47%, 65%)
HSB
hsb(114, 41%, 82%)
CMYK
cmyk(37%, 0%, 41%, 18%)
Oklch
oklch(78.7% 0.139 141.8)

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

#83A47F

Celadon · DarkSeaGreen · Olive Green

HEX
#83A47F
RGB
rgb(131, 164, 127)
HSL
hsl(114, 17%, 57%)
HSB
hsb(114, 23%, 64%)
CMYK
cmyk(20%, 0%, 23%, 36%)
Oklch
oklch(68.4% 0.065 142.0)

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

#817882

Ink Gray · Gray · Warm Gray

HEX
#817882
RGB
rgb(129, 120, 130)
HSL
hsl(294, 4%, 49%)
HSB
hsb(294, 8%, 51%)
CMYK
cmyk(1%, 8%, 0%, 49%)
Oklch
oklch(58.4% 0.018 322.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#7F3787

Dark Plum · Purple · Eggplant

HEX
#7F3787
RGB
rgb(127, 55, 135)
HSL
hsl(294, 42%, 37%)
HSB
hsb(294, 59%, 53%)
CMYK
cmyk(6%, 59%, 0%, 47%)
Oklch
oklch(46.6% 0.145 323.6)

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

#7E0B8B

Royal Purple · Purple · Eggplant

HEX
#7E0B8B
RGB
rgb(126, 11, 139)
HSL
hsl(294, 85%, 29%)
HSB
hsb(294, 92%, 55%)
CMYK
cmyk(9%, 92%, 0%, 45%)
Oklch
oklch(42.9% 0.195 323.1)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

84D07B
C77CD0

Analogous

AED07C
84D07B
7CD09D

Triadic

84D07B
7C84D0
D07C84

Split-Comp.

84D07B
9D7CD0
D07CAE

Tetradic

84D07B
7CAED0
C77CD0
D09D7C

Contrast Matrix WCAG 2.1 Contrast

84D07B
83A47F
817882
7F3787
7E0B8B
—
1.5
Fail
2.3
Fail
4.0
AA Large
4.9
AA
1.5
Fail
—
1.5
Fail
2.7
Fail
3.3
AA Large
2.3
Fail
1.5
Fail
—
1.8
Fail
2.1
Fail
4.0
AA Large
2.7
Fail
1.8
Fail
—
1.2
Fail
4.9
AA
3.3
AA Large
2.1
Fail
1.2
Fail
—
White BG
1.9Fail
2.8Fail
4.2AA Large
7.5AAA
9.1AAA
Black BG
11.3AAA
7.6AAA
4.9AA
2.8Fail
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A690
919288
7D7D80
605F74
4C4B6C

Deuteranopia

A19B95
8F8D8A
7E7E7F
64696F
535B65

Tritanopia

88A0A3
858F91
817E7D
7B6461
78544E

Achromatopsia

B0B0B0
969696
7C7C7C
565656
3C3C3C

Shades & Tints Shades & Tints

#84D07B

Dark
Light

#83A47F

Dark
Light

#817882

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #84d07b;
  --color-2: #83a47f;
  --color-3: #817882;
  --color-4: #7f3787;
  --color-5: #7e0b8b;
}

SCSS

$color-1: #84d07b;
$color-2: #83a47f;
$color-3: #817882;
$color-4: #7f3787;
$color-5: #7e0b8b;

TAILWIND

colors: {
  'brand-1': '#84d07b',
  'brand-2': '#83a47f',
  'brand-3': '#817882',
  'brand-4': '#7f3787',
  'brand-5': '#7e0b8b',
}

RGB Array

[132, 208, 123], [131, 164, 127], [129, 120, 130], [127, 55, 135], [126, 11, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #84D07B, #83A47F, #817882, #7F3787, #7E0B8B 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: #84d07b; --color-2: #83a47f; --color-3: #817882; --color-4: #7f3787; --color-5: #7e0b8b. 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