#CC3362 + #CC6681 + #CC9992 + #CCCCB0 + #CCFFCA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CC3362

Dark Violet · MediumVioletRed · Camellia

HEX

#CC3362

RGB

rgb(204, 51, 98)

HSL

hsl(342, 60%, 50%)

HSB

hsb(342, 75%, 80%)

CMYK

cmyk(0%, 75%, 52%, 20%)

Oklch

oklch(56.8% 0.190 7.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#CC6681

Dark Violet · LightCoral · Rose Pink

HEX

#CC6681

RGB

rgb(204, 102, 129)

HSL

hsl(344, 50%, 60%)

HSB

hsb(344, 50%, 80%)

CMYK

cmyk(0%, 50%, 37%, 20%)

Oklch

oklch(63.8% 0.132 4.8)

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

#CC9992

Peach Pink · Tan · Coral Red

HEX

#CC9992

RGB

rgb(204, 153, 146)

HSL

hsl(7, 36%, 69%)

HSB

hsb(7, 28%, 80%)

CMYK

cmyk(0%, 25%, 28%, 20%)

Oklch

oklch(72.9% 0.062 27.6)

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

#CCCCB0

Fresh Green · Silver · Sunflower

HEX

#CCCCB0

RGB

rgb(204, 204, 176)

HSL

hsl(60, 22%, 75%)

HSB

hsb(60, 14%, 80%)

CMYK

cmyk(0%, 0%, 14%, 20%)

Oklch

oklch(83.8% 0.038 107.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#CCFFCA

Emerald · LightGray · Mint Green

HEX

#CCFFCA

RGB

rgb(204, 255, 202)

HSL

hsl(118, 100%, 90%)

HSB

hsb(118, 21%, 100%)

CMYK

cmyk(20%, 0%, 21%, 0%)

Oklch

oklch(95.1% 0.088 143.9)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC3362

33CC9E

Analogous

CC33AD

CC3362

CC5233

Triadic

CC3362

61CC33

3361CC

Split-Comp.

CC3362

33CC52

33ADCC

Tetradic

CC3362

ADCC33

33CC9E

5233CC

Contrast Matrix WCAG 2.1 Contrast

CC3362	CC6681	CC9992	CCCCB0	CCFFCA
—	1.4 Fail	2.0 Fail	3.0 AA Large	4.4 AA Large
1.4 Fail	—	1.5 Fail	2.2 Fail	3.2 AA Large
2.0 Fail	1.5 Fail	—	1.5 Fail	2.2 Fail
3.0 AA Large	2.2 Fail	1.5 Fail	—	1.5 Fail
4.4 AA Large	3.2 AA Large	2.2 Fail	1.5 Fail	—

White BG

5.0AA

3.6AA Large

2.5Fail

1.6Fail

1.1Fail

Black BG

4.2AA Large

5.8AA

8.5AAA

12.8AAA

18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8857

A09F7A

B6B594

CCCCB7

E2E3D7

Deuteranopia

939E54

A6AD79

B9BD94

CCCCB8

DFDBDA

Tritanopia

C44E4C

C77574

C99595

CCBCBD

CFE1E3

Achromatopsia

666666

888888

A7A7A7

C9C9C9

EAEAEA

Shades & Tints Shades & Tints

#CC3362

Dark

Light

#CC6681

Dark

Light

#CC9992

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc3362;
  --color-2: #cc6681;
  --color-3: #cc9992;
  --color-4: #ccccb0;
  --color-5: #ccffca;
}

SCSS

$color-1: #cc3362;
$color-2: #cc6681;
$color-3: #cc9992;
$color-4: #ccccb0;
$color-5: #ccffca;

TAILWIND

colors: {
  'brand-1': '#cc3362',
  'brand-2': '#cc6681',
  'brand-3': '#cc9992',
  'brand-4': '#ccccb0',
  'brand-5': '#ccffca',
}

RGB Array

[204, 51, 98], [204, 102, 129], [204, 153, 146], [204, 204, 176], [204, 255, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC3362, #CC6681, #CC9992, #CCCCB0, #CCFFCA 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: #cc3362; --color-2: #cc6681; --color-3: #cc9992; --color-4: #ccccb0; --color-5: #ccffca. 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