← Back to Editor

#CC1B4F · #840847 · #12142D · #018780 · #8CE798

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#CC1B4F

Dark Violet · Crimson · Camellia

HEX
#CC1B4F
RGB
rgb(204, 27, 79)
HSL
hsl(342, 77%, 45%)
HSB
hsb(342, 87%, 80%)
CMYK
cmyk(0%, 87%, 61%, 20%)
Oklch
oklch(54.8% 0.206 12.4)

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

#840847

Dark Violet · Brown · Camellia

HEX
#840847
RGB
rgb(132, 8, 71)
HSL
hsl(330, 89%, 27%)
HSB
hsb(330, 94%, 52%)
CMYK
cmyk(0%, 94%, 46%, 48%)
Oklch
oklch(40.2% 0.158 358.5)

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

#12142D

Indigo · Black · Deep Sea Blue

HEX
#12142D
RGB
rgb(18, 20, 45)
HSL
hsl(236, 43%, 12%)
HSB
hsb(236, 60%, 18%)
CMYK
cmyk(60%, 56%, 0%, 82%)
Oklch
oklch(20.5% 0.049 277.6)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#018780

Mineral Blue · Teal · Mint Ice

HEX
#018780
RGB
rgb(1, 135, 128)
HSL
hsl(177, 99%, 27%)
HSB
hsb(177, 99%, 53%)
CMYK
cmyk(99%, 0%, 5%, 47%)
Oklch
oklch(56.2% 0.097 188.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8CE798

Emerald · LightGreen · Apple Green

HEX
#8CE798
RGB
rgb(140, 231, 152)
HSL
hsl(128, 65%, 73%)
HSB
hsb(128, 39%, 91%)
CMYK
cmyk(39%, 0%, 34%, 9%)
Oklch
oklch(85.1% 0.140 147.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC1B4F
1ACB96

Analogous

CB1AA8
CC1B4F
CB3E1A

Triadic

CC1B4F
4FCB1A
1A4FCB

Split-Comp.

CC1B4F
1ACB3E
1AA8CB

Tetradic

CC1B4F
A8CB1A
1ACB96
3E1ACB

Contrast Matrix WCAG 2.1 Contrast

CC1B4F
840847
12142D
018780
8CE798
—
1.8
Fail
3.3
AA Large
1.2
Fail
3.6
AA Large
1.8
Fail
—
1.8
Fail
2.3
Fail
6.6
AA
3.3
AA Large
1.8
Fail
—
4.1
AA Large
12.0
AAA
1.2
Fail
2.3
Fail
4.1
AA Large
—
2.9
Fail
3.6
AA Large
6.6
AA
12.0
AAA
2.9
Fail
—
White BG
5.5AA
10.0AAA
18.0AAA
4.4AA Large
1.5Fail
Black BG
3.8AA Large
2.1Fail
1.2Fail
4.8AA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7E42
4E4D38
131327
3B3C82
B3B4AB

Deuteranopia

8A973F
565F34
131326
332982
AEA7B0

Tritanopia

C33836
7E2C29
122221
088383
91BABE

Achromatopsia

565656
343434
161616
5E5E5E
C3C3C3

Shades & Tints Shades & Tints

#CC1B4F

Dark
Light

#840847

Dark
Light

#12142D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc1b4f;
  --color-2: #840847;
  --color-3: #12142d;
  --color-4: #018780;
  --color-5: #8ce798;
}

SCSS

$color-1: #cc1b4f;
$color-2: #840847;
$color-3: #12142d;
$color-4: #018780;
$color-5: #8ce798;

TAILWIND

colors: {
  'brand-1': '#cc1b4f',
  'brand-2': '#840847',
  'brand-3': '#12142d',
  'brand-4': '#018780',
  'brand-5': '#8ce798',
}

RGB Array

[204, 27, 79], [132, 8, 71], [18, 20, 45], [1, 135, 128], [140, 231, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC1B4F, #840847, #12142D, #018780, #8CE798 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cc1b4f; --color-2: #840847; --color-3: #12142d; --color-4: #018780; --color-5: #8ce798. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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