#80B3AB + #E2D8FC + #CCC0D9 + #CDA8A9 + #CF6A81 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#80B3AB

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#80B3AB

RGB

rgb(128, 179, 171)

HSL

hsl(171, 25%, 60%)

HSB

hsb(171, 28%, 70%)

CMYK

cmyk(28%, 0%, 4%, 30%)

Oklch

oklch(72.8% 0.055 184.0)

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

#E2D8FC

Wisteria · Lavender · Sky Blue

HEX

#E2D8FC

RGB

rgb(226, 216, 252)

HSL

hsl(257, 86%, 92%)

HSB

hsb(257, 14%, 99%)

CMYK

cmyk(10%, 14%, 0%, 1%)

Oklch

oklch(90.1% 0.050 298.1)

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

#CCC0D9

Wisteria · LightGray · Lilac Purple

HEX

#CCC0D9

RGB

rgb(204, 192, 217)

HSL

hsl(269, 25%, 80%)

HSB

hsb(269, 12%, 85%)

CMYK

cmyk(6%, 12%, 0%, 15%)

Oklch

oklch(82.5% 0.037 307.1)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#CDA8A9

Peach Pink · Tan · Coral Red

HEX

#CDA8A9

RGB

rgb(205, 168, 169)

HSL

hsl(358, 27%, 73%)

HSB

hsb(358, 18%, 80%)

CMYK

cmyk(0%, 18%, 18%, 20%)

Oklch

oklch(76.5% 0.043 16.3)

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

#CF6A81

Peach Pink · LightCoral · Coral Red

HEX

#CF6A81

RGB

rgb(207, 106, 129)

HSL

hsl(346, 51%, 61%)

HSB

hsb(346, 49%, 81%)

CMYK

cmyk(0%, 49%, 38%, 19%)

Oklch

oklch(64.8% 0.129 6.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

80B3AB

B38087

Analogous

80B391

80B3AB

80A1B3

Triadic

80B3AB

AB80B3

B3AB80

Split-Comp.

80B3AB

B380A1

B39180

Tetradic

80B3AB

9180B3

B38087

A1B380

Contrast Matrix WCAG 2.1 Contrast

80B3AB	E2D8FC	CCC0D9	CDA8A9	CF6A81
—	1.7 Fail	1.4 Fail	1.1 Fail	1.5 Fail
1.7 Fail	—	1.3 Fail	1.6 Fail	2.6 Fail
1.4 Fail	1.3 Fail	—	1.2 Fail	2.0 Fail
1.1 Fail	1.6 Fail	1.2 Fail	—	1.6 Fail
1.5 Fail	2.6 Fail	2.0 Fail	1.6 Fail	—

White BG

2.3Fail

1.4Fail

1.7Fail

2.1Fail

3.5AA Large

Black BG

9.0AAA

15.5AAA

12.1AAA

9.8AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9697AD

DEDEF3

C7C7D3

BDBDA9

A3A27B

Deuteranopia

938FAD

DEDFF1

C8C8D1

BFC2A9

A9B17A

Tritanopia

83AEAF

E2ECEB

CBCECD

CBA9A9

CA7776

Achromatopsia

A3A3A3

DFDFDF

C6C6C6

B3B3B3

8B8B8B

Shades & Tints Shades & Tints

#80B3AB

Dark

Light

#E2D8FC

Dark

Light

#CCC0D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #80b3ab;
  --color-2: #e2d8fc;
  --color-3: #ccc0d9;
  --color-4: #cda8a9;
  --color-5: #cf6a81;
}

SCSS

$color-1: #80b3ab;
$color-2: #e2d8fc;
$color-3: #ccc0d9;
$color-4: #cda8a9;
$color-5: #cf6a81;

TAILWIND

colors: {
  'brand-1': '#80b3ab',
  'brand-2': '#e2d8fc',
  'brand-3': '#ccc0d9',
  'brand-4': '#cda8a9',
  'brand-5': '#cf6a81',
}

RGB Array

[128, 179, 171], [226, 216, 252], [204, 192, 217], [205, 168, 169], [207, 106, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #80B3AB, #E2D8FC, #CCC0D9, #CDA8A9, #CF6A81 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: #80b3ab; --color-2: #e2d8fc; --color-3: #ccc0d9; --color-4: #cda8a9; --color-5: #cf6a81. 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