← Back to Editor

#ABDED4 · #84C0C4 · #6F9E8A · #758A6E · #7A695C

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 Library

Color Details Color Details

#ABDED4

Jade · LightBlue · Glacier Blue

HEX
#ABDED4
RGB
rgb(171, 222, 212)
HSL
hsl(168, 44%, 77%)
HSB
hsb(168, 23%, 87%)
CMYK
cmyk(23%, 0%, 5%, 13%)
Oklch
oklch(86.2% 0.054 181.6)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#84C0C4

Sky Blue · SkyBlue · Lake Green

HEX
#84C0C4
RGB
rgb(132, 192, 196)
HSL
hsl(184, 35%, 64%)
HSB
hsb(184, 33%, 77%)
CMYK
cmyk(33%, 2%, 0%, 23%)
Oklch
oklch(76.8% 0.062 201.2)

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

#6F9E8A

Mineral Blue · CadetBlue · Olive Green

HEX
#6F9E8A
RGB
rgb(111, 158, 138)
HSL
hsl(154, 20%, 53%)
HSB
hsb(154, 30%, 62%)
CMYK
cmyk(30%, 0%, 13%, 38%)
Oklch
oklch(66.0% 0.059 166.3)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#758A6E

Celadon · Gray · Olive Green

HEX
#758A6E
RGB
rgb(117, 138, 110)
HSL
hsl(105, 11%, 49%)
HSB
hsb(105, 20%, 54%)
CMYK
cmyk(15%, 0%, 20%, 46%)
Oklch
oklch(60.9% 0.048 137.9)

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

#7A695C

Tangerine · DimGray · Amber Brown

HEX
#7A695C
RGB
rgb(122, 105, 92)
HSL
hsl(26, 14%, 42%)
HSB
hsb(26, 25%, 48%)
CMYK
cmyk(0%, 14%, 25%, 52%)
Oklch
oklch(53.3% 0.029 59.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABDED4
DEABB5

Analogous

ABDEBA
ABDED4
ABCFDE

Triadic

ABDED4
D4ABDE
DED4AB

Split-Comp.

ABDED4
DEABCF
DEBAAB

Tetradic

ABDED4
BAABDE
DEABB5
CFDEAB

Contrast Matrix WCAG 2.1 Contrast

ABDED4
84C0C4
6F9E8A
758A6E
7A695C
—
1.4
Fail
2.0
Fail
2.5
Fail
3.5
AA Large
1.4
Fail
—
1.5
Fail
1.8
Fail
2.6
Fail
2.0
Fail
1.5
Fail
—
1.2
Fail
1.7
Fail
2.5
Fail
1.8
Fail
1.2
Fail
—
1.4
Fail
3.5
AA Large
2.6
Fail
1.7
Fail
1.4
Fail
—
White BG
1.5Fail
2.0Fail
3.0AA Large
3.7AA Large
5.2AA
Black BG
14.1AAA
10.3AAA
6.9AA
5.6AA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C2D6
9E9FC3
83848F
7E7E75
73725F

Deuteranopia

BEBAD7
9B96C3
817D90
7D7B76
747560

Tritanopia

AED8D9
87C2C2
719394
767A7B
796262

Achromatopsia

CECECE
AFAFAF
8E8E8E
818181
6D6D6D

Shades & Tints Shades & Tints

#ABDED4

Dark
Light

#84C0C4

Dark
Light

#6F9E8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abded4;
  --color-2: #84c0c4;
  --color-3: #6f9e8a;
  --color-4: #758a6e;
  --color-5: #7a695c;
}

SCSS

$color-1: #abded4;
$color-2: #84c0c4;
$color-3: #6f9e8a;
$color-4: #758a6e;
$color-5: #7a695c;

TAILWIND

colors: {
  'brand-1': '#abded4',
  'brand-2': '#84c0c4',
  'brand-3': '#6f9e8a',
  'brand-4': '#758a6e',
  'brand-5': '#7a695c',
}

RGB Array

[171, 222, 212], [132, 192, 196], [111, 158, 138], [117, 138, 110], [122, 105, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABDED4, #84C0C4, #6F9E8A, #758A6E, #7A695C 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: #abded4; --color-2: #84c0c4; --color-3: #6f9e8a; --color-4: #758a6e; --color-5: #7a695c. 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