← Back to Editor

#CC8A8C · #CC9D9B · #CCBBBB · #CCCFD4 · #CCE5E9

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CC8A8C

Peach Pink · DarkSalmon · Coral Red

HEX
#CC8A8C
RGB
rgb(204, 138, 140)
HSL
hsl(358, 39%, 67%)
HSB
hsb(358, 32%, 80%)
CMYK
cmyk(0%, 32%, 31%, 20%)
Oklch
oklch(70.0% 0.081 17.3)

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

#CC9D9B

Peach Pink · Tan · Coral Red

HEX
#CC9D9B
RGB
rgb(204, 157, 155)
HSL
hsl(2, 32%, 70%)
HSB
hsb(2, 24%, 80%)
CMYK
cmyk(0%, 23%, 24%, 20%)
Oklch
oklch(73.9% 0.056 21.3)

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

#CCBBBB

Peach Pink · Silver · Coral Red

HEX
#CCBBBB
RGB
rgb(204, 187, 187)
HSL
hsl(0, 14%, 77%)
HSB
hsb(0, 8%, 80%)
CMYK
cmyk(0%, 8%, 8%, 20%)
Oklch
oklch(80.6% 0.019 17.6)

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

#CCCFD4

Azure · LightGray · Pearl Gray

HEX
#CCCFD4
RGB
rgb(204, 207, 212)
HSL
hsl(218, 9%, 82%)
HSB
hsb(218, 4%, 83%)
CMYK
cmyk(4%, 2%, 0%, 17%)
Oklch
oklch(85.4% 0.008 260.7)

Traditional「Azure」· Paint「Pearl Gray」· Creative Silver Lining

#CCE5E9

Sky Blue · LightGray · Glacier Blue

HEX
#CCE5E9
RGB
rgb(204, 229, 233)
HSL
hsl(188, 40%, 86%)
HSB
hsb(188, 12%, 91%)
CMYK
cmyk(12%, 2%, 0%, 9%)
Oklch
oklch(90.5% 0.027 208.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC8A8C
8ACCC9

Analogous

CC8AAD
CC8A8C
CCA98A

Triadic

CC8A8C
8CCC8A
8A8CCC

Split-Comp.

CC8A8C
8ACCA9
8AADCC

Tetradic

CC8A8C
ADCC8A
8ACCC9
A98ACC

Contrast Matrix WCAG 2.1 Contrast

CC8A8C
CC9D9B
CCBBBB
CCCFD4
CCE5E9
—
1.2
Fail
1.5
Fail
1.8
Fail
2.1
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.1
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
White BG
2.8Fail
2.4Fail
1.8Fail
1.6Fail
1.3Fail
Black BG
7.6AAA
8.9AAA
11.4AAA
13.4AAA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAF8C
B8B79B
C5C4BB
CDCDD3
D7D7E8

Deuteranopia

B3B88B
BABE9C
C6C7BB
CDCDD2
D5D4E8

Tritanopia

C98B8B
CA9C9C
CBBBBB
CCD2D2
CDE7E7

Achromatopsia

9E9E9E
ABABAB
C0C0C0
CFCFCF
DEDEDE

Shades & Tints Shades & Tints

#CC8A8C

Dark
Light

#CC9D9B

Dark
Light

#CCBBBB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc8a8c;
  --color-2: #cc9d9b;
  --color-3: #ccbbbb;
  --color-4: #cccfd4;
  --color-5: #cce5e9;
}

SCSS

$color-1: #cc8a8c;
$color-2: #cc9d9b;
$color-3: #ccbbbb;
$color-4: #cccfd4;
$color-5: #cce5e9;

TAILWIND

colors: {
  'brand-1': '#cc8a8c',
  'brand-2': '#cc9d9b',
  'brand-3': '#ccbbbb',
  'brand-4': '#cccfd4',
  'brand-5': '#cce5e9',
}

RGB Array

[204, 138, 140], [204, 157, 155], [204, 187, 187], [204, 207, 212], [204, 229, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC8A8C, #CC9D9B, #CCBBBB, #CCCFD4, #CCE5E9 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cc8a8c; --color-2: #cc9d9b; --color-3: #ccbbbb; --color-4: #cccfd4; --color-5: #cce5e9. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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