← Back to Editor

#C20C45 · #E3FFC5 · #AEBF9B · #848B7C · #5E5F5D

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#C20C45

Dark Violet · Crimson · Camellia

HEX
#C20C45
RGB
rgb(194, 12, 69)
HSL
hsl(341, 88%, 40%)
HSB
hsb(341, 94%, 76%)
CMYK
cmyk(0%, 94%, 64%, 24%)
Oklch
oklch(52.2% 0.204 13.7)

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

#E3FFC5

Willow Green · Beige · Mint Green

HEX
#E3FFC5
RGB
rgb(227, 255, 197)
HSL
hsl(89, 100%, 89%)
HSB
hsb(89, 23%, 100%)
CMYK
cmyk(11%, 0%, 23%, 0%)
Oklch
oklch(96.5% 0.081 128.8)

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

#AEBF9B

Willow Green · DarkGray · Apple Green

HEX
#AEBF9B
RGB
rgb(174, 191, 155)
HSL
hsl(88, 22%, 68%)
HSB
hsb(88, 19%, 75%)
CMYK
cmyk(9%, 0%, 19%, 25%)
Oklch
oklch(78.2% 0.053 128.2)

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

#848B7C

Ash · Gray · Warm Gray

HEX
#848B7C
RGB
rgb(132, 139, 124)
HSL
hsl(88, 6%, 52%)
HSB
hsb(88, 11%, 55%)
CMYK
cmyk(5%, 0%, 11%, 45%)
Oklch
oklch(62.7% 0.023 127.6)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#5E5F5D

Ink Gray · DimGray · Charcoal

HEX
#5E5F5D
RGB
rgb(94, 95, 93)
HSL
hsl(90, 1%, 37%)
HSB
hsb(90, 2%, 37%)
CMYK
cmyk(1%, 0%, 2%, 63%)
Oklch
oklch(48.4% 0.003 128.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C20C45
0CC087

Analogous

C00C9F
C20C45
C02D0C

Triadic

C20C45
45C00C
0C45C0

Split-Comp.

C20C45
0CC02D
0C9FC0

Tetradic

C20C45
9FC00C
0CC087
2D0CC0

Contrast Matrix WCAG 2.1 Contrast

C20C45
E3FFC5
AEBF9B
848B7C
5E5F5D
—
5.6
AA
3.1
AA Large
1.7
Fail
1.0
Fail
5.6
AA
—
1.8
Fail
3.2
AA Large
5.9
AA
3.1
AA Large
1.8
Fail
—
1.8
Fail
3.3
AA Large
1.7
Fail
3.2
AA Large
1.8
Fail
—
1.8
Fail
1.0
Fail
5.9
AA
3.3
AA Large
1.8
Fail
—
White BG
6.1AA
1.1Fail
2.0Fail
3.5AA Large
6.4AA
Black BG
3.4AA Large
19.4AAA
10.7AAA
6.0AA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

737237
EFEFD3
B5B6A4
878780
5E5E5D

Deuteranopia

7E8B34
EEEBD6
B4B3A6
878681
5E5E5E

Tritanopia

B92C2A
E4DEE1
AFABAC
848283
5E5E5E

Achromatopsia

494949
F0F0F0
B6B6B6
878787
5E5E5E

Shades & Tints Shades & Tints

#C20C45

Dark
Light

#E3FFC5

Dark
Light

#AEBF9B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c20c45;
  --color-2: #e3ffc5;
  --color-3: #aebf9b;
  --color-4: #848b7c;
  --color-5: #5e5f5d;
}

SCSS

$color-1: #c20c45;
$color-2: #e3ffc5;
$color-3: #aebf9b;
$color-4: #848b7c;
$color-5: #5e5f5d;

TAILWIND

colors: {
  'brand-1': '#c20c45',
  'brand-2': '#e3ffc5',
  'brand-3': '#aebf9b',
  'brand-4': '#848b7c',
  'brand-5': '#5e5f5d',
}

RGB Array

[194, 12, 69], [227, 255, 197], [174, 191, 155], [132, 139, 124], [94, 95, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #C20C45, #E3FFC5, #AEBF9B, #848B7C, #5E5F5D 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: #c20c45; --color-2: #e3ffc5; --color-3: #aebf9b; --color-4: #848b7c; --color-5: #5e5f5d. 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 dark-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