#89DAD4 + #F0DEC3 + #F6BFA0 + #DD9D97 + #CC7A8F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#89DAD4

Jade · SkyBlue · Lake Green

HEX

#89DAD4

RGB

rgb(137, 218, 212)

HSL

hsl(176, 52%, 70%)

HSB

hsb(176, 37%, 85%)

CMYK

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

Oklch

oklch(83.5% 0.080 189.7)

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

#F0DEC3

Goose Yellow · Bisque · Peach Orange

HEX

#F0DEC3

RGB

rgb(240, 222, 195)

HSL

hsl(36, 60%, 85%)

HSB

hsb(36, 19%, 94%)

CMYK

cmyk(0%, 7%, 19%, 6%)

Oklch

oklch(90.8% 0.041 78.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F6BFA0

Apricot · BurlyWood · Peach Orange

HEX

#F6BFA0

RGB

rgb(246, 191, 160)

HSL

hsl(22, 83%, 80%)

HSB

hsb(22, 35%, 96%)

CMYK

cmyk(0%, 22%, 35%, 4%)

Oklch

oklch(84.6% 0.076 50.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#DD9D97

Peach Pink · Tan · Coral Red

HEX

#DD9D97

RGB

rgb(221, 157, 151)

HSL

hsl(5, 51%, 73%)

HSB

hsb(5, 32%, 87%)

CMYK

cmyk(0%, 29%, 32%, 13%)

Oklch

oklch(75.6% 0.078 25.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CC7A8F

Peach Pink · LightCoral · Coral Red

HEX

#CC7A8F

RGB

rgb(204, 122, 143)

HSL

hsl(345, 45%, 64%)

HSB

hsb(345, 40%, 80%)

CMYK

cmyk(0%, 40%, 30%, 20%)

Oklch

oklch(67.3% 0.105 3.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89DAD4

DA8B90

Analogous

8BDAAD

89DAD4

8BB8DA

Triadic

89DAD4

D58BDA

DAD58B

Split-Comp.

89DAD4

DA8BB8

DAAD8B

Tetradic

89DAD4

AD8BDA

DA8B90

B8DA8B

Contrast Matrix WCAG 2.1 Contrast

89DAD4	F0DEC3	F6BFA0	DD9D97	CC7A8F
—	1.2 Fail	1.0 Fail	1.4 Fail	1.9 Fail
1.2 Fail	—	1.2 Fail	1.7 Fail	2.4 Fail
1.0 Fail	1.2 Fail	—	1.4 Fail	1.9 Fail
1.4 Fail	1.7 Fail	1.4 Fail	—	1.4 Fail
1.9 Fail	2.4 Fail	1.9 Fail	1.4 Fail	—

White BG

1.6Fail

1.3Fail

1.6Fail

2.2Fail

3.1AA Large

Black BG

13.0AAA

15.9AAA

12.9AAA

9.3AAA

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACADD5

E8E8CA

DEDEA8

C1C198

A8A88A

Deuteranopia

A7A1D6

E9EBCB

E1E6A9

C5CA99

ADB389

Tritanopia

8DD7D7

EFCFD0

F3ADAF

DA9A9A

C88685

Achromatopsia

C1C1C1

E0E0E0

CCCCCC

AFAFAF

959595

Shades & Tints Shades & Tints

#89DAD4

Dark

Light

#F0DEC3

Dark

Light

#F6BFA0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89dad4;
  --color-2: #f0dec3;
  --color-3: #f6bfa0;
  --color-4: #dd9d97;
  --color-5: #cc7a8f;
}

SCSS

$color-1: #89dad4;
$color-2: #f0dec3;
$color-3: #f6bfa0;
$color-4: #dd9d97;
$color-5: #cc7a8f;

TAILWIND

colors: {
  'brand-1': '#89dad4',
  'brand-2': '#f0dec3',
  'brand-3': '#f6bfa0',
  'brand-4': '#dd9d97',
  'brand-5': '#cc7a8f',
}

RGB Array

[137, 218, 212], [240, 222, 195], [246, 191, 160], [221, 157, 151], [204, 122, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #89DAD4, #F0DEC3, #F6BFA0, #DD9D97, #CC7A8F 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: #89dad4; --color-2: #f0dec3; --color-3: #f6bfa0; --color-4: #dd9d97; --color-5: #cc7a8f. 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