#CCC9D4 + #CFA39F + #E87861 + #B08080 + #AA9FC7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCC9D4

Wisteria · LightGray · Sky Blue

HEX

#CCC9D4

RGB

rgb(204, 201, 212)

HSL

hsl(256, 11%, 81%)

HSB

hsb(256, 5%, 83%)

CMYK

cmyk(4%, 5%, 0%, 17%)

Oklch

oklch(84.2% 0.015 298.5)

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

#CFA39F

Peach Pink · Tan · Coral Red

HEX

#CFA39F

RGB

rgb(207, 163, 159)

HSL

hsl(5, 33%, 72%)

HSB

hsb(5, 23%, 81%)

CMYK

cmyk(0%, 21%, 23%, 19%)

Oklch

oklch(75.5% 0.053 24.4)

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

#E87861

Peach Pink · Salmon · Coral Red

HEX

#E87861

RGB

rgb(232, 120, 97)

HSL

hsl(10, 75%, 65%)

HSB

hsb(10, 58%, 91%)

CMYK

cmyk(0%, 48%, 58%, 9%)

Oklch

oklch(69.6% 0.144 32.9)

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

#B08080

Crimson · Gray · Passion Red

HEX

#B08080

RGB

rgb(176, 128, 128)

HSL

hsl(0, 23%, 60%)

HSB

hsb(0, 27%, 69%)

CMYK

cmyk(0%, 27%, 27%, 31%)

Oklch

oklch(64.7% 0.060 18.8)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#AA9FC7

Wisteria · DarkGray · Cobalt Blue

HEX

#AA9FC7

RGB

rgb(170, 159, 199)

HSL

hsl(256, 26%, 70%)

HSB

hsb(256, 20%, 78%)

CMYK

cmyk(15%, 20%, 0%, 22%)

Oklch

oklch(72.5% 0.058 297.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC9D4

D1D4C9

Analogous

C9CCD4

CCC9D4

D1C9D4

Triadic

CCC9D4

D4CCC9

C9D4CC

Split-Comp.

CCC9D4

D4D1C9

CCD4C9

Tetradic

CCC9D4

D4C9CC

D1D4C9

C9D4D1

Contrast Matrix WCAG 2.1 Contrast

CCC9D4	CFA39F	E87861	B08080	AA9FC7
—	1.4 Fail	1.8 Fail	2.1 Fail	1.5 Fail
1.4 Fail	—	1.3 Fail	1.5 Fail	1.1 Fail
1.8 Fail	1.3 Fail	—	1.2 Fail	1.2 Fail
2.1 Fail	1.5 Fail	1.2 Fail	—	1.4 Fail
1.5 Fail	1.1 Fail	1.2 Fail	1.4 Fail	—

White BG

1.6Fail

2.2Fail

2.9Fail

3.4AA Large

2.5Fail

Black BG

12.9AAA

9.4AAA

7.3AAA

6.2AA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBD1

BCBCA0

B8B667

9B9B80

A5A5BD

Deuteranopia

CBCBD1

BFC2A0

BEC668

9EA280

A6A7BB

Tritanopia

CCCFCF

CDA1A1

E26B6C

AE8080

A9B6B4

Achromatopsia

CBCBCB

B0B0B0

979797

8E8E8E

A7A7A7

Shades & Tints Shades & Tints

#CCC9D4

Dark

Light

#CFA39F

Dark

Light

#E87861

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc9d4;
  --color-2: #cfa39f;
  --color-3: #e87861;
  --color-4: #b08080;
  --color-5: #aa9fc7;
}

SCSS

$color-1: #ccc9d4;
$color-2: #cfa39f;
$color-3: #e87861;
$color-4: #b08080;
$color-5: #aa9fc7;

TAILWIND

colors: {
  'brand-1': '#ccc9d4',
  'brand-2': '#cfa39f',
  'brand-3': '#e87861',
  'brand-4': '#b08080',
  'brand-5': '#aa9fc7',
}

RGB Array

[204, 201, 212], [207, 163, 159], [232, 120, 97], [176, 128, 128], [170, 159, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC9D4, #CFA39F, #E87861, #B08080, #AA9FC7 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: #ccc9d4; --color-2: #cfa39f; --color-3: #e87861; --color-4: #b08080; --color-5: #aa9fc7. 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