← Back to Editor

#CC456C · #965050 · #806060 · #778C8C · #9DF2CF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CC456C

Dark Violet · MediumVioletRed · Rose Pink

HEX
#CC456C
RGB
rgb(204, 69, 108)
HSL
hsl(343, 57%, 54%)
HSB
hsb(343, 66%, 80%)
CMYK
cmyk(0%, 66%, 47%, 20%)
Oklch
oklch(58.9% 0.172 6.5)

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

#965050

Crimson · Sienna · Passion Red

HEX
#965050
RGB
rgb(150, 80, 80)
HSL
hsl(0, 30%, 45%)
HSB
hsb(0, 47%, 59%)
CMYK
cmyk(0%, 47%, 47%, 41%)
Oklch
oklch(51.5% 0.094 20.8)

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

#806060

Crimson · DimGray · Passion Red

HEX
#806060
RGB
rgb(128, 96, 96)
HSL
hsl(0, 14%, 44%)
HSB
hsb(0, 25%, 50%)
CMYK
cmyk(0%, 25%, 25%, 50%)
Oklch
oklch(52.2% 0.042 18.6)

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

#778C8C

Slate Blue · LightSlateGray · Warm Gray

HEX
#778C8C
RGB
rgb(119, 140, 140)
HSL
hsl(180, 8%, 51%)
HSB
hsb(180, 15%, 55%)
CMYK
cmyk(15%, 0%, 0%, 45%)
Oklch
oklch(62.4% 0.024 196.5)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#9DF2CF

Jade · LightBlue · Apple Green

HEX
#9DF2CF
RGB
rgb(157, 242, 207)
HSL
hsl(155, 77%, 78%)
HSB
hsb(155, 35%, 95%)
CMYK
cmyk(35%, 0%, 14%, 5%)
Oklch
oklch(89.7% 0.096 166.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC456C
47CDA7

Analogous

CD47B0
CC456C
CD6447

Triadic

CC456C
6DCD47
476DCD

Split-Comp.

CC456C
47CD64
47B0CD

Tetradic

CC456C
B0CD47
47CDA7
6447CD

Contrast Matrix WCAG 2.1 Contrast

CC456C
965050
806060
778C8C
9DF2CF
—
1.3
Fail
1.2
Fail
1.3
Fail
3.5
AA Large
1.3
Fail
—
1.1
Fail
1.7
Fail
4.5
AA
1.2
Fail
1.1
Fail
—
1.6
Fail
4.3
AA Large
1.3
Fail
1.7
Fail
1.6
Fail
—
2.7
Fail
3.5
AA Large
4.5
AA
4.3
AA Large
2.7
Fail
—
White BG
4.5AA
5.9AA
5.6AA
3.6AA Large
1.3Fail
Black BG
4.6AA
3.6AA Large
3.8AA Large
5.9AA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

929063
787750
727260
80808C
C2C3D7

Deuteranopia

99A360
7C8150
747660
7F7D8C
BDB7D9

Tritanopia

C55B59
935050
7E6060
788C8C
A1DEE0

Achromatopsia

727272
656565
6A6A6A
868686
D5D5D5

Shades & Tints Shades & Tints

#CC456C

Dark
Light

#965050

Dark
Light

#806060

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc456c;
  --color-2: #965050;
  --color-3: #806060;
  --color-4: #778c8c;
  --color-5: #9df2cf;
}

SCSS

$color-1: #cc456c;
$color-2: #965050;
$color-3: #806060;
$color-4: #778c8c;
$color-5: #9df2cf;

TAILWIND

colors: {
  'brand-1': '#cc456c',
  'brand-2': '#965050',
  'brand-3': '#806060',
  'brand-4': '#778c8c',
  'brand-5': '#9df2cf',
}

RGB Array

[204, 69, 108], [150, 80, 80], [128, 96, 96], [119, 140, 140], [157, 242, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC456C, #965050, #806060, #778C8C, #9DF2CF is ideal for: corporate websites, product showcases, portfolios. 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: #cc456c; --color-2: #965050; --color-3: #806060; --color-4: #778c8c; --color-5: #9df2cf. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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