← Back to Editor

#83D7AB · #81BD98 · #80A484 · #7E8A71 · #7C705E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#83D7AB

Emerald · MediumAquaMarine · Apple Green

HEX
#83D7AB
RGB
rgb(131, 215, 171)
HSL
hsl(149, 51%, 68%)
HSB
hsb(149, 39%, 84%)
CMYK
cmyk(39%, 0%, 20%, 16%)
Oklch
oklch(81.3% 0.104 160.0)

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

#81BD98

Celadon · DarkSeaGreen · Apple Green

HEX
#81BD98
RGB
rgb(129, 189, 152)
HSL
hsl(143, 31%, 62%)
HSB
hsb(143, 32%, 74%)
CMYK
cmyk(32%, 0%, 20%, 26%)
Oklch
oklch(74.7% 0.082 156.7)

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

#80A484

Celadon · DarkSeaGreen · Olive Green

HEX
#80A484
RGB
rgb(128, 164, 132)
HSL
hsl(127, 17%, 57%)
HSB
hsb(127, 22%, 64%)
CMYK
cmyk(22%, 0%, 20%, 36%)
Oklch
oklch(68.3% 0.061 147.9)

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

#7E8A71

Grass Green · Gray · Olive Green

HEX
#7E8A71
RGB
rgb(126, 138, 113)
HSL
hsl(89, 10%, 49%)
HSB
hsb(89, 18%, 54%)
CMYK
cmyk(9%, 0%, 18%, 46%)
Oklch
oklch(61.6% 0.039 128.4)

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

#7C705E

Ochre · DimGray · Amber Brown

HEX
#7C705E
RGB
rgb(124, 112, 94)
HSL
hsl(36, 14%, 43%)
HSB
hsb(36, 24%, 49%)
CMYK
cmyk(0%, 10%, 24%, 51%)
Oklch
oklch(55.1% 0.031 78.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83D7AB
D784AF

Analogous

85D784
83D7AB
84D7D6

Triadic

83D7AB
AC84D7
D7AC84

Split-Comp.

83D7AB
D684D7
D78485

Tetradic

83D7AB
8485D7
D784AF
D7D684

Contrast Matrix WCAG 2.1 Contrast

83D7AB
81BD98
80A484
7E8A71
7C705E
—
1.3
Fail
1.6
Fail
2.1
Fail
2.8
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.2
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.1
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.8
Fail
2.2
Fail
1.7
Fail
1.3
Fail
—
White BG
1.7Fail
2.2Fail
2.8Fail
3.6AA Large
4.8AA
Black BG
12.3AAA
9.7AAA
7.6AAA
5.8AA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A8B6
9B9CA1
90908C
838377
777762

Deuteranopia

A39CB8
9893A3
8E8B8E
838279
787863

Tritanopia

87BEC0
84A8AA
829293
7F7C7D
7B6667

Achromatopsia

B9B9B9
A7A7A7
969696
848484
727272

Shades & Tints Shades & Tints

#83D7AB

Dark
Light

#81BD98

Dark
Light

#80A484

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83d7ab;
  --color-2: #81bd98;
  --color-3: #80a484;
  --color-4: #7e8a71;
  --color-5: #7c705e;
}

SCSS

$color-1: #83d7ab;
$color-2: #81bd98;
$color-3: #80a484;
$color-4: #7e8a71;
$color-5: #7c705e;

TAILWIND

colors: {
  'brand-1': '#83d7ab',
  'brand-2': '#81bd98',
  'brand-3': '#80a484',
  'brand-4': '#7e8a71',
  'brand-5': '#7c705e',
}

RGB Array

[131, 215, 171], [129, 189, 152], [128, 164, 132], [126, 138, 113], [124, 112, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #83D7AB, #81BD98, #80A484, #7E8A71, #7C705E is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #83d7ab; --color-2: #81bd98; --color-3: #80a484; --color-4: #7e8a71; --color-5: #7c705e. 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. Restrained colors convey professionalism and trust. 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