← Back to Editor

#CC4569 · #99568F · #6667B4 · #3377DA · #0088FF

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

#CC4569

Dark Violet · MediumVioletRed · Rose Pink

HEX
#CC4569
RGB
rgb(204, 69, 105)
HSL
hsl(344, 57%, 54%)
HSB
hsb(344, 66%, 80%)
CMYK
cmyk(0%, 66%, 49%, 20%)
Oklch
oklch(58.8% 0.172 8.0)

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

#99568F

Rose Purple · Gray · Violet

HEX
#99568F
RGB
rgb(153, 86, 143)
HSL
hsl(309, 28%, 47%)
HSB
hsb(309, 44%, 60%)
CMYK
cmyk(0%, 44%, 7%, 40%)
Oklch
oklch(55.1% 0.116 332.7)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#6667B4

Azure · SlateBlue · Navy Blue

HEX
#6667B4
RGB
rgb(102, 103, 180)
HSL
hsl(239, 34%, 55%)
HSB
hsb(239, 43%, 71%)
CMYK
cmyk(43%, 43%, 0%, 29%)
Oklch
oklch(54.8% 0.118 281.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#3377DA

Azure · SteelBlue · Navy Blue

HEX
#3377DA
RGB
rgb(51, 119, 218)
HSL
hsl(216, 69%, 53%)
HSB
hsb(216, 77%, 85%)
CMYK
cmyk(77%, 45%, 0%, 15%)
Oklch
oklch(57.8% 0.166 258.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#0088FF

Lake Blue · DodgerBlue · Navy Blue

HEX
#0088FF
RGB
rgb(0, 136, 255)
HSL
hsl(208, 100%, 50%)
HSB
hsb(208, 100%, 100%)
CMYK
cmyk(100%, 47%, 0%, 0%)
Oklch
oklch(63.2% 0.202 254.1)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC4569
47CDA9

Analogous

CD47AD
CC4569
CD6647

Triadic

CC4569
6ACD47
476ACD

Split-Comp.

CC4569
47CD66
47ADCD

Tetradic

CC4569
ADCD47
47CDA9
6647CD

Contrast Matrix WCAG 2.1 Contrast

CC4569
99568F
6667B4
3377DA
0088FF
—
1.1
Fail
1.1
Fail
1.0
Fail
1.3
Fail
1.1
Fail
—
1.0
Fail
1.2
Fail
1.5
Fail
1.1
Fail
1.0
Fail
—
1.2
Fail
1.4
Fail
1.0
Fail
1.2
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
White BG
4.5AA
5.1AA
5.0AA
4.4AA Large
3.5AA Large
Black BG
4.6AA
4.1AA Large
4.2AA Large
4.8AA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

929060
7C7B81
6666A1
5051C2
3B3CE2

Deuteranopia

99A35E
80857E
66669D
4D47BC
3329DB

Tritanopia

C55958
967674
66938F
36AFAB
07CBC6

Achromatopsia

717171
717171
6F6F6F
6E6E6E
6D6D6D

Shades & Tints Shades & Tints

#CC4569

Dark
Light

#99568F

Dark
Light

#6667B4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc4569;
  --color-2: #99568f;
  --color-3: #6667b4;
  --color-4: #3377da;
  --color-5: #0088ff;
}

SCSS

$color-1: #cc4569;
$color-2: #99568f;
$color-3: #6667b4;
$color-4: #3377da;
$color-5: #0088ff;

TAILWIND

colors: {
  'brand-1': '#cc4569',
  'brand-2': '#99568f',
  'brand-3': '#6667b4',
  'brand-4': '#3377da',
  'brand-5': '#0088ff',
}

RGB Array

[204, 69, 105], [153, 86, 143], [102, 103, 180], [51, 119, 218], [0, 136, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC4569, #99568F, #6667B4, #3377DA, #0088FF 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: #cc4569; --color-2: #99568f; --color-3: #6667b4; --color-4: #3377da; --color-5: #0088ff. 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