← Back to Editor

#A3E3BE · #86CFC7 · #7DB0BD · #7690A8 · #68718F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A3E3BE

Emerald · LightBlue · Apple Green

HEX
#A3E3BE
RGB
rgb(163, 227, 190)
HSL
hsl(145, 53%, 76%)
HSB
hsb(145, 28%, 89%)
CMYK
cmyk(28%, 0%, 16%, 11%)
Oklch
oklch(86.3% 0.083 158.7)

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

#86CFC7

Jade · SkyBlue · Lake Green

HEX
#86CFC7
RGB
rgb(134, 207, 199)
HSL
hsl(173, 43%, 67%)
HSB
hsb(173, 35%, 81%)
CMYK
cmyk(35%, 0%, 4%, 19%)
Oklch
oklch(80.4% 0.074 187.1)

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

#7DB0BD

Sky Blue · MediumAquaMarine · Lake Green

HEX
#7DB0BD
RGB
rgb(125, 176, 189)
HSL
hsl(192, 33%, 62%)
HSB
hsb(192, 34%, 74%)
CMYK
cmyk(34%, 7%, 0%, 26%)
Oklch
oklch(72.6% 0.057 215.3)

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

#7690A8

Slate Blue · LightSlateGray · Navy Blue

HEX
#7690A8
RGB
rgb(118, 144, 168)
HSL
hsl(209, 22%, 56%)
HSB
hsb(209, 30%, 66%)
CMYK
cmyk(30%, 14%, 0%, 34%)
Oklch
oklch(64.2% 0.047 246.5)

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

#68718F

Indigo · SlateGray · Navy Blue

HEX
#68718F
RGB
rgb(104, 113, 143)
HSL
hsl(226, 16%, 48%)
HSB
hsb(226, 27%, 56%)
CMYK
cmyk(27%, 21%, 0%, 44%)
Oklch
oklch(55.2% 0.048 271.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3E3BE
E2A1C7

Analogous

A7E2A1
A3E3BE
A1E2DD

Triadic

A3E3BE
BCA1E2
E2BCA1

Split-Comp.

A3E3BE
DDA1E2
E2A1A7

Tetradic

A3E3BE
A1A7E2
E2A1C7
E2DDA1

Contrast Matrix WCAG 2.1 Contrast

A3E3BE
86CFC7
7DB0BD
7690A8
68718F
—
1.2
Fail
1.6
Fail
2.3
Fail
3.3
AA Large
1.2
Fail
—
1.3
Fail
1.9
Fail
2.7
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
2.0
Fail
2.3
Fail
1.9
Fail
1.4
Fail
—
1.5
Fail
3.3
AA Large
2.7
Fail
2.0
Fail
1.5
Fail
—
White BG
1.5Fail
1.8Fail
2.4Fail
3.3AA Large
4.8AA
Black BG
14.3AAA
11.8AAA
8.8AAA
6.3AA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFC7
A6A6C9
9394BA
8181A2
6C6C88

Deuteranopia

BBB6C9
A19CC9
908CB9
807EA1
6B6B86

Tritanopia

A6CED0
8ACACB
80B7B7
779E9D
688281

Achromatopsia

CCCCCC
B8B8B8
A2A2A2
8B8B8B
727272

Shades & Tints Shades & Tints

#A3E3BE

Dark
Light

#86CFC7

Dark
Light

#7DB0BD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3e3be;
  --color-2: #86cfc7;
  --color-3: #7db0bd;
  --color-4: #7690a8;
  --color-5: #68718f;
}

SCSS

$color-1: #a3e3be;
$color-2: #86cfc7;
$color-3: #7db0bd;
$color-4: #7690a8;
$color-5: #68718f;

TAILWIND

colors: {
  'brand-1': '#a3e3be',
  'brand-2': '#86cfc7',
  'brand-3': '#7db0bd',
  'brand-4': '#7690a8',
  'brand-5': '#68718f',
}

RGB Array

[163, 227, 190], [134, 207, 199], [125, 176, 189], [118, 144, 168], [104, 113, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3E3BE, #86CFC7, #7DB0BD, #7690A8, #68718F 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: #a3e3be; --color-2: #86cfc7; --color-3: #7db0bd; --color-4: #7690a8; --color-5: #68718f. 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