#89C1B8 + #B7D1A2 + #FFD880 + #D3797B + #C94E87 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#89C1B8

Jade · MediumAquaMarine · Lake Green

HEX

#89C1B8

RGB

rgb(137, 193, 184)

HSL

hsl(170, 31%, 65%)

HSB

hsb(170, 29%, 76%)

CMYK

cmyk(29%, 0%, 5%, 24%)

Oklch

oklch(77.0% 0.060 183.7)

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

#B7D1A2

Celadon · Silver · Apple Green

HEX

#B7D1A2

RGB

rgb(183, 209, 162)

HSL

hsl(93, 34%, 73%)

HSB

hsb(93, 22%, 82%)

CMYK

cmyk(12%, 0%, 22%, 18%)

Oklch

oklch(82.9% 0.070 131.4)

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

#FFD880

Goose Yellow · Khaki · Sunflower

HEX

#FFD880

RGB

rgb(255, 216, 128)

HSL

hsl(42, 100%, 75%)

HSB

hsb(42, 50%, 100%)

CMYK

cmyk(0%, 15%, 50%, 0%)

Oklch

oklch(89.7% 0.116 86.2)

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

#D3797B

Peach Pink · LightCoral · Coral Red

HEX

#D3797B

RGB

rgb(211, 121, 123)

HSL

hsl(359, 51%, 65%)

HSB

hsb(359, 43%, 83%)

CMYK

cmyk(0%, 43%, 42%, 17%)

Oklch

oklch(67.5% 0.112 19.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#C94E87

Dark Violet · MediumVioletRed · Rose Pink

HEX

#C94E87

RGB

rgb(201, 78, 135)

HSL

hsl(332, 53%, 55%)

HSB

hsb(332, 61%, 79%)

CMYK

cmyk(0%, 61%, 33%, 21%)

Oklch

oklch(60.3% 0.166 354.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89C1B8

C18A93

Analogous

8AC19D

89C1B8

8AAFC1

Triadic

89C1B8

B88AC1

C1B88A

Split-Comp.

89C1B8

C18AAF

C19D8A

Tetradic

89C1B8

9D8AC1

C18A93

AFC18A

Contrast Matrix WCAG 2.1 Contrast

89C1B8	B7D1A2	FFD880	D3797B	C94E87
—	1.2 Fail	1.5 Fail	1.5 Fail	2.1 Fail
1.2 Fail	—	1.2 Fail	1.9 Fail	2.6 Fail
1.5 Fail	1.2 Fail	—	2.3 Fail	3.1 AA Large
1.5 Fail	1.9 Fail	2.3 Fail	—	1.4 Fail
2.1 Fail	2.6 Fail	3.1 AA Large	1.4 Fail	—

White BG

2.0Fail

1.7Fail

1.4Fail

3.1AA Large

4.3AA Large

Black BG

10.4AAA

12.7AAA

15.4AAA

6.8AA

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A2BA

C2C2AD

EEEE95

ACAB7B

949379

Deuteranopia

9E9ABB

C1BFB0

F0F39A

B1B87A

9BA476

Tritanopia

8CBCBC

B8B6B8

FDA6AA

CF7A7A

C36E6C

Achromatopsia

AFAFAF

C4C4C4

DADADA

949494

797979

Shades & Tints Shades & Tints

#89C1B8

Dark

Light

#B7D1A2

Dark

Light

#FFD880

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89c1b8;
  --color-2: #b7d1a2;
  --color-3: #ffd880;
  --color-4: #d3797b;
  --color-5: #c94e87;
}

SCSS

$color-1: #89c1b8;
$color-2: #b7d1a2;
$color-3: #ffd880;
$color-4: #d3797b;
$color-5: #c94e87;

TAILWIND

colors: {
  'brand-1': '#89c1b8',
  'brand-2': '#b7d1a2',
  'brand-3': '#ffd880',
  'brand-4': '#d3797b',
  'brand-5': '#c94e87',
}

RGB Array

[137, 193, 184], [183, 209, 162], [255, 216, 128], [211, 121, 123], [201, 78, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #89C1B8, #B7D1A2, #FFD880, #D3797B, #C94E87 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: #89c1b8; --color-2: #b7d1a2; --color-3: #ffd880; --color-4: #d3797b; --color-5: #c94e87. 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