#89D8AB + #9E9AE4 + #D8A1D8 + #F1B4D5 + #EFECE3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#89D8AB

Celadon · LightGreen · Apple Green

HEX

#89D8AB

RGB

rgb(137, 216, 171)

HSL

hsl(146, 50%, 69%)

HSB

hsb(146, 37%, 85%)

CMYK

cmyk(37%, 0%, 21%, 15%)

Oklch

oklch(81.9% 0.101 158.2)

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

#9E9AE4

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#9E9AE4

RGB

rgb(158, 154, 228)

HSL

hsl(243, 58%, 75%)

HSB

hsb(243, 32%, 89%)

CMYK

cmyk(31%, 32%, 0%, 11%)

Oklch

oklch(71.8% 0.107 285.9)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#D8A1D8

Mauve · Violet · Lilac Purple

HEX

#D8A1D8

RGB

rgb(216, 161, 216)

HSL

hsl(300, 41%, 74%)

HSB

hsb(300, 25%, 85%)

CMYK

cmyk(0%, 25%, 0%, 15%)

Oklch

oklch(77.8% 0.098 326.5)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#F1B4D5

Mauve · Pink · Cherry Blossom

HEX

#F1B4D5

RGB

rgb(241, 180, 213)

HSL

hsl(328, 69%, 83%)

HSB

hsb(328, 25%, 95%)

CMYK

cmyk(0%, 25%, 12%, 5%)

Oklch

oklch(83.5% 0.082 345.4)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#EFECE3

Goose Yellow · Linen · Lemon Cream

HEX

#EFECE3

RGB

rgb(239, 236, 227)

HSL

hsl(45, 27%, 91%)

HSB

hsb(45, 5%, 94%)

CMYK

cmyk(0%, 1%, 5%, 6%)

Oklch

oklch(94.3% 0.012 91.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89D8AB

D788B5

Analogous

8ED788

89D8AB

88D7D2

Triadic

89D8AB

AB88D7

D7AB88

Split-Comp.

89D8AB

D288D7

D7888E

Tetradic

89D8AB

888ED7

D788B5

D7D288

Contrast Matrix WCAG 2.1 Contrast

89D8AB	9E9AE4	D8A1D8	F1B4D5	EFECE3
—	1.5 Fail	1.2 Fail	1.0 Fail	1.4 Fail
1.5 Fail	—	1.2 Fail	1.5 Fail	2.2 Fail
1.2 Fail	1.2 Fail	—	1.2 Fail	1.8 Fail
1.0 Fail	1.5 Fail	1.2 Fail	—	1.5 Fail
1.4 Fail	2.2 Fail	1.8 Fail	1.5 Fail	—

White BG

1.7Fail

2.6Fail

2.1Fail

1.7Fail

1.2Fail

Black BG

12.5AAA

8.2AAA

10.0AAA

12.2AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABACB6

9C9CD2

C0C0CB

D7D6CD

EEEEE5

Deuteranopia

A7A1B9

9D9DCE

C3C8C8

DADFCB

EEEEE6

Tritanopia

8DBEC0

9EC4C1

D5C0BE

EEC7C5

EFE7E7

Achromatopsia

BBBBBB

A4A4A4

B8B8B8

CACACA

ECECEC

Shades & Tints Shades & Tints

#89D8AB

Dark

Light

#9E9AE4

Dark

Light

#D8A1D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89d8ab;
  --color-2: #9e9ae4;
  --color-3: #d8a1d8;
  --color-4: #f1b4d5;
  --color-5: #efece3;
}

SCSS

$color-1: #89d8ab;
$color-2: #9e9ae4;
$color-3: #d8a1d8;
$color-4: #f1b4d5;
$color-5: #efece3;

TAILWIND

colors: {
  'brand-1': '#89d8ab',
  'brand-2': '#9e9ae4',
  'brand-3': '#d8a1d8',
  'brand-4': '#f1b4d5',
  'brand-5': '#efece3',
}

RGB Array

[137, 216, 171], [158, 154, 228], [216, 161, 216], [241, 180, 213], [239, 236, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #89D8AB, #9E9AE4, #D8A1D8, #F1B4D5, #EFECE3 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: #89d8ab; --color-2: #9e9ae4; --color-3: #d8a1d8; --color-4: #f1b4d5; --color-5: #efece3. 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