← Back to Editor

#B4E2D1 · #ADC2C1 · #A6A2B2 · #9F81A2 · #986192

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

#B4E2D1

Jade · LightBlue · Apple Green

HEX
#B4E2D1
RGB
rgb(180, 226, 209)
HSL
hsl(158, 44%, 80%)
HSB
hsb(158, 20%, 89%)
CMYK
cmyk(20%, 0%, 8%, 11%)
Oklch
oklch(87.6% 0.053 170.5)

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

#ADC2C1

Jade · Silver · Lake Green

HEX
#ADC2C1
RGB
rgb(173, 194, 193)
HSL
hsl(177, 15%, 72%)
HSB
hsb(177, 11%, 76%)
CMYK
cmyk(11%, 0%, 1%, 24%)
Oklch
oklch(79.8% 0.023 193.2)

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

#A6A2B2

Wisteria · DarkGray · Silver Sand

HEX
#A6A2B2
RGB
rgb(166, 162, 178)
HSL
hsl(255, 9%, 67%)
HSB
hsb(255, 9%, 70%)
CMYK
cmyk(7%, 9%, 0%, 30%)
Oklch
oklch(72.1% 0.023 297.2)

Traditional「Wisteria」· Paint「Silver Sand」· Creative Urban Concrete

#9F81A2

Dark Plum · LightSlateGray · Violet

HEX
#9F81A2
RGB
rgb(159, 129, 162)
HSL
hsl(295, 15%, 57%)
HSB
hsb(295, 20%, 64%)
CMYK
cmyk(2%, 20%, 0%, 36%)
Oklch
oklch(64.2% 0.059 323.3)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#986192

Rose Purple · Gray · Violet

HEX
#986192
RGB
rgb(152, 97, 146)
HSL
hsl(307, 22%, 49%)
HSB
hsb(307, 36%, 60%)
CMYK
cmyk(0%, 36%, 4%, 40%)
Oklch
oklch(56.9% 0.098 330.7)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4E2D1
E2B6C6

Analogous

B6E2BC
B4E2D1
B6DCE2

Triadic

B4E2D1
D2B6E2
E2D2B6

Split-Comp.

B4E2D1
E2B6DC
E2BCB6

Tetradic

B4E2D1
BCB6E2
E2B6C6
DCE2B6

Contrast Matrix WCAG 2.1 Contrast

B4E2D1
ADC2C1
A6A2B2
9F81A2
986192
—
1.3
Fail
1.7
Fail
2.4
Fail
3.3
AA Large
1.3
Fail
—
1.3
Fail
1.8
Fail
2.5
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
1.9
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
3.3
AA Large
2.5
Fail
1.9
Fail
1.4
Fail
—
White BG
1.4Fail
1.9Fail
2.5Fail
3.4AA Large
4.7AA
Black BG
14.7AAA
11.3AAA
8.4AAA
6.1AA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8D5
B6B6C1
A4A4AE
92929A
808086

Deuteranopia

C5C2D6
B5B3C1
A5A5AD
949698
838883

Tritanopia

B6D8D9
AEC1C1
A6ABAA
9D9492
957D7B

Achromatopsia

D2D2D2
BCBCBC
A5A5A5
8E8E8E
777777

Shades & Tints Shades & Tints

#B4E2D1

Dark
Light

#ADC2C1

Dark
Light

#A6A2B2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4e2d1;
  --color-2: #adc2c1;
  --color-3: #a6a2b2;
  --color-4: #9f81a2;
  --color-5: #986192;
}

SCSS

$color-1: #b4e2d1;
$color-2: #adc2c1;
$color-3: #a6a2b2;
$color-4: #9f81a2;
$color-5: #986192;

TAILWIND

colors: {
  'brand-1': '#b4e2d1',
  'brand-2': '#adc2c1',
  'brand-3': '#a6a2b2',
  'brand-4': '#9f81a2',
  'brand-5': '#986192',
}

RGB Array

[180, 226, 209], [173, 194, 193], [166, 162, 178], [159, 129, 162], [152, 97, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4E2D1, #ADC2C1, #A6A2B2, #9F81A2, #986192 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: #b4e2d1; --color-2: #adc2c1; --color-3: #a6a2b2; --color-4: #9f81a2; --color-5: #986192. 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