← Back to Editor

#CCEBB5 · #8CBDAA · #C76B93 · #DE2669 · #380618

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 LibraryData Visualization

Color Details Color Details

#CCEBB5

Emerald · LightGray · Mint Green

HEX
#CCEBB5
RGB
rgb(204, 235, 181)
HSL
hsl(94, 57%, 82%)
HSB
hsb(94, 23%, 92%)
CMYK
cmyk(13%, 0%, 23%, 8%)
Oklch
oklch(90.4% 0.079 132.2)

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

#8CBDAA

Jade · DarkSeaGreen · Apple Green

HEX
#8CBDAA
RGB
rgb(140, 189, 170)
HSL
hsl(157, 27%, 65%)
HSB
hsb(157, 26%, 74%)
CMYK
cmyk(26%, 0%, 10%, 26%)
Oklch
oklch(75.8% 0.059 168.9)

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

#C76B93

Dark Violet · LightCoral · Rose Pink

HEX
#C76B93
RGB
rgb(199, 107, 147)
HSL
hsl(334, 45%, 60%)
HSB
hsb(334, 46%, 78%)
CMYK
cmyk(0%, 46%, 26%, 22%)
Oklch
oklch(64.4% 0.125 353.7)

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

#DE2669

Dark Violet · MediumVioletRed · Rose Pink

HEX
#DE2669
RGB
rgb(222, 38, 105)
HSL
hsl(338, 74%, 51%)
HSB
hsb(338, 83%, 87%)
CMYK
cmyk(0%, 83%, 53%, 13%)
Oklch
oklch(59.2% 0.217 6.4)

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

#380618

Dark Violet · Black · Raspberry

HEX
#380618
RGB
rgb(56, 6, 24)
HSL
hsl(338, 81%, 12%)
HSB
hsb(338, 89%, 22%)
CMYK
cmyk(0%, 89%, 57%, 78%)
Oklch
oklch(22.8% 0.079 4.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCEBB5
D5B7EB

Analogous

E8EBB7
CCEBB5
B7EBBA

Triadic

CCEBB5
B7CEEB
EBB7CE

Split-Comp.

CCEBB5
BAB7EB
EBB7E8

Tetradic

CCEBB5
B7E8EB
D5B7EB
EBBAB7

Contrast Matrix WCAG 2.1 Contrast

CCEBB5
8CBDAA
C76B93
DE2669
380618
—
1.6
Fail
2.7
Fail
3.5
AA Large
13.3
AAA
1.6
Fail
—
1.7
Fail
2.2
Fail
8.3
AAA
2.7
Fail
1.7
Fail
—
1.3
Fail
4.9
AA
3.5
AA Large
2.2
Fail
1.3
Fail
—
3.8
AA Large
13.3
AAA
8.3
AAA
4.9
AA
3.8
AA Large
—
White BG
1.3Fail
2.1Fail
3.5AA Large
4.6AA
17.4AAA
Black BG
16.1AAA
10.0AAA
6.0AA
4.6AA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9DAC2
A1A2AF
9F9E89
8E8D59
222214

Deuteranopia

D8D5C5
9E9BB0
A5AB87
99A755
252913

Tritanopia

CECCCF
8EB2B3
C28280
D54C49
35100F

Achromatopsia

DCDCDC
ACACAC
8B8B8B
656565
171717

Shades & Tints Shades & Tints

#CCEBB5

Dark
Light

#8CBDAA

Dark
Light

#C76B93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccebb5;
  --color-2: #8cbdaa;
  --color-3: #c76b93;
  --color-4: #de2669;
  --color-5: #380618;
}

SCSS

$color-1: #ccebb5;
$color-2: #8cbdaa;
$color-3: #c76b93;
$color-4: #de2669;
$color-5: #380618;

TAILWIND

colors: {
  'brand-1': '#ccebb5',
  'brand-2': '#8cbdaa',
  'brand-3': '#c76b93',
  'brand-4': '#de2669',
  'brand-5': '#380618',
}

RGB Array

[204, 235, 181], [140, 189, 170], [199, 107, 147], [222, 38, 105], [56, 6, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCEBB5, #8CBDAA, #C76B93, #DE2669, #380618 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ccebb5; --color-2: #8cbdaa; --color-3: #c76b93; --color-4: #de2669; --color-5: #380618. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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