← Back to Editor

#83867E · #77A89C · #64DECC · #B5E7DF · #E3E8E6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#83867E

Ash · Gray · Warm Gray

HEX
#83867E
RGB
rgb(131, 134, 126)
HSL
hsl(83, 3%, 51%)
HSB
hsb(83, 6%, 53%)
CMYK
cmyk(2%, 0%, 6%, 47%)
Oklch
oklch(61.5% 0.012 123.6)

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

#77A89C

Mineral Blue · CadetBlue · Lake Green

HEX
#77A89C
RGB
rgb(119, 168, 156)
HSL
hsl(165, 22%, 56%)
HSB
hsb(165, 29%, 66%)
CMYK
cmyk(29%, 0%, 7%, 34%)
Oklch
oklch(69.3% 0.055 177.7)

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

#64DECC

Jade · MediumTurquoise · Lake Green

HEX
#64DECC
RGB
rgb(100, 222, 204)
HSL
hsl(171, 65%, 63%)
HSB
hsb(171, 55%, 87%)
CMYK
cmyk(55%, 0%, 8%, 13%)
Oklch
oklch(82.6% 0.113 182.4)

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

#B5E7DF

Jade · LightBlue · Glacier Blue

HEX
#B5E7DF
RGB
rgb(181, 231, 223)
HSL
hsl(170, 51%, 81%)
HSB
hsb(170, 22%, 91%)
CMYK
cmyk(22%, 0%, 3%, 9%)
Oklch
oklch(89.1% 0.053 184.3)

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

#E3E8E6

Jade · Lavender · Mint Green

HEX
#E3E8E6
RGB
rgb(227, 232, 230)
HSL
hsl(156, 10%, 90%)
HSB
hsb(156, 2%, 91%)
CMYK
cmyk(2%, 0%, 1%, 9%)
Oklch
oklch(92.7% 0.006 170.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83867E
817E86

Analogous

86857E
83867E
7F867E

Triadic

83867E
7E8386
867E83

Split-Comp.

83867E
7E7F86
857E86

Tetradic

83867E
7E8685
817E86
867E7F

Contrast Matrix WCAG 2.1 Contrast

83867E
77A89C
64DECC
B5E7DF
E3E8E6
—
1.4
Fail
2.3
Fail
2.7
Fail
3.0
Fail
1.4
Fail
—
1.6
Fail
2.0
Fail
2.2
Fail
2.3
Fail
1.6
Fail
—
1.2
Fail
1.3
Fail
2.7
Fail
2.0
Fail
1.2
Fail
—
1.1
Fail
3.0
Fail
2.2
Fail
1.3
Fail
1.1
Fail
—
White BG
3.7AA Large
2.7Fail
1.6Fail
1.4Fail
1.2Fail
Black BG
5.7AA
7.9AAA
12.9AAA
15.5AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

848480
8C8D9F
999AD0
CBCBE1
E5E5E6

Deuteranopia

848480
8986A0
9289D1
C8C4E1
E5E4E7

Tritanopia

838182
79A1A2
6AD4D5
B8E2E3
E3E7E7

Achromatopsia

848484
989898
B7B7B7
D7D7D7
E6E6E6

Shades & Tints Shades & Tints

#83867E

Dark
Light

#77A89C

Dark
Light

#64DECC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83867e;
  --color-2: #77a89c;
  --color-3: #64decc;
  --color-4: #b5e7df;
  --color-5: #e3e8e6;
}

SCSS

$color-1: #83867e;
$color-2: #77a89c;
$color-3: #64decc;
$color-4: #b5e7df;
$color-5: #e3e8e6;

TAILWIND

colors: {
  'brand-1': '#83867e',
  'brand-2': '#77a89c',
  'brand-3': '#64decc',
  'brand-4': '#b5e7df',
  'brand-5': '#e3e8e6',
}

RGB Array

[131, 134, 126], [119, 168, 156], [100, 222, 204], [181, 231, 223], [227, 232, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #83867E, #77A89C, #64DECC, #B5E7DF, #E3E8E6 is ideal for: health products, baby brands, fresh-style blogs. 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: #83867e; --color-2: #77a89c; --color-3: #64decc; --color-4: #b5e7df; --color-5: #e3e8e6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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