← Back to Editor

#B4D6D4 · #77C7BD · #86ADA7 · #9E9187 · #A87B6C

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

#B4D6D4

Jade · LightBlue · Glacier Blue

HEX
#B4D6D4
RGB
rgb(180, 214, 212)
HSL
hsl(176, 29%, 77%)
HSB
hsb(176, 16%, 84%)
CMYK
cmyk(16%, 0%, 1%, 16%)
Oklch
oklch(85.1% 0.036 192.1)

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

#77C7BD

Jade · MediumAquaMarine · Lake Green

HEX
#77C7BD
RGB
rgb(119, 199, 189)
HSL
hsl(173, 42%, 62%)
HSB
hsb(173, 40%, 78%)
CMYK
cmyk(40%, 0%, 5%, 22%)
Oklch
oklch(77.5% 0.080 185.5)

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

#86ADA7

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#86ADA7
RGB
rgb(134, 173, 167)
HSL
hsl(171, 19%, 60%)
HSB
hsb(171, 23%, 68%)
CMYK
cmyk(23%, 0%, 3%, 32%)
Oklch
oklch(71.7% 0.043 184.7)

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

#9E9187

Tangerine · Gray · Warm Sun

HEX
#9E9187
RGB
rgb(158, 145, 135)
HSL
hsl(26, 11%, 57%)
HSB
hsb(26, 15%, 62%)
CMYK
cmyk(0%, 8%, 15%, 38%)
Oklch
oklch(66.5% 0.021 60.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#A87B6C

Tangerine · Gray · Warm Sun

HEX
#A87B6C
RGB
rgb(168, 123, 108)
HSL
hsl(15, 26%, 54%)
HSB
hsb(15, 36%, 66%)
CMYK
cmyk(0%, 27%, 36%, 34%)
Oklch
oklch(62.4% 0.061 39.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4D6D4
D5B3B6

Analogous

B3D5C2
B4D6D4
B3C7D5

Triadic

B4D6D4
D3B3D5
D5D3B3

Split-Comp.

B4D6D4
D5B3C7
D5C2B3

Tetradic

B4D6D4
C2B3D5
D5B3B6
C7D5B3

Contrast Matrix WCAG 2.1 Contrast

B4D6D4
77C7BD
86ADA7
9E9187
A87B6C
—
1.3
Fail
1.6
Fail
2.0
Fail
2.4
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
2.4
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
1.6Fail
2.0Fail
2.5Fail
3.1AA Large
3.7AA Large
Black BG
13.5AAA
10.7AAA
8.5AAA
6.9AA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3D4
9A9ABF
9797A8
989889
959470

Deuteranopia

C1BED5
958FC0
9592A9
999A8A
979B71

Tritanopia

B6D5D5
7BC1C2
88AAAA
9D8B8C
A67273

Achromatopsia

CCCCCC
AEAEAE
A1A1A1
949494
878787

Shades & Tints Shades & Tints

#B4D6D4

Dark
Light

#77C7BD

Dark
Light

#86ADA7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4d6d4;
  --color-2: #77c7bd;
  --color-3: #86ada7;
  --color-4: #9e9187;
  --color-5: #a87b6c;
}

SCSS

$color-1: #b4d6d4;
$color-2: #77c7bd;
$color-3: #86ada7;
$color-4: #9e9187;
$color-5: #a87b6c;

TAILWIND

colors: {
  'brand-1': '#b4d6d4',
  'brand-2': '#77c7bd',
  'brand-3': '#86ada7',
  'brand-4': '#9e9187',
  'brand-5': '#a87b6c',
}

RGB Array

[180, 214, 212], [119, 199, 189], [134, 173, 167], [158, 145, 135], [168, 123, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4D6D4, #77C7BD, #86ADA7, #9E9187, #A87B6C 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: #b4d6d4; --color-2: #77c7bd; --color-3: #86ada7; --color-4: #9e9187; --color-5: #a87b6c. 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