← Back to Editor

#2C667E · #3A8F96 · #B2CC9D · #54113A · #DD1C2D

dark

A 5-color dark 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

#2C667E

Slate Blue · Teal · Mint Ice

HEX
#2C667E
RGB
rgb(44, 102, 126)
HSL
hsl(198, 48%, 33%)
HSB
hsb(198, 65%, 49%)
CMYK
cmyk(65%, 19%, 0%, 51%)
Oklch
oklch(48.2% 0.071 228.2)

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

#3A8F96

Slate Blue · SteelBlue · Mint Ice

HEX
#3A8F96
RGB
rgb(58, 143, 150)
HSL
hsl(185, 44%, 41%)
HSB
hsb(185, 61%, 59%)
CMYK
cmyk(61%, 5%, 0%, 41%)
Oklch
oklch(60.2% 0.081 202.7)

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

#B2CC9D

Celadon · DarkGray · Apple Green

HEX
#B2CC9D
RGB
rgb(178, 204, 157)
HSL
hsl(93, 32%, 71%)
HSB
hsb(93, 23%, 80%)
CMYK
cmyk(13%, 0%, 23%, 20%)
Oklch
oklch(81.4% 0.070 131.4)

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

#54113A

Rose Purple · Maroon · Raspberry

HEX
#54113A
RGB
rgb(84, 17, 58)
HSL
hsl(323, 66%, 20%)
HSB
hsb(323, 80%, 33%)
CMYK
cmyk(0%, 80%, 31%, 67%)
Oklch
oklch(31.0% 0.108 347.7)

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

#DD1C2D

Vermilion · Crimson · Passion Red

HEX
#DD1C2D
RGB
rgb(221, 28, 45)
HSL
hsl(355, 78%, 49%)
HSB
hsb(355, 87%, 87%)
CMYK
cmyk(0%, 87%, 80%, 13%)
Oklch
oklch(57.4% 0.220 24.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C667E
7D442C

Analogous

2C7D6C
2C667E
2C3C7D

Triadic

2C667E
7D2C64
647D2C

Split-Comp.

2C667E
7D2C3C
7D6C2C

Tetradic

2C667E
6C2C7D
7D442C
3C7D2C

Contrast Matrix WCAG 2.1 Contrast

2C667E
3A8F96
B2CC9D
54113A
DD1C2D
—
1.7
Fail
3.6
AA Large
2.2
Fail
1.3
Fail
1.7
Fail
—
2.2
Fail
3.7
AA Large
1.3
Fail
3.6
AA Large
2.2
Fail
—
7.9
AAA
2.8
Fail
2.2
Fail
3.7
AA Large
7.9
AAA
—
2.8
Fail
1.3
Fail
1.3
Fail
2.8
Fail
2.8
Fail
—
White BG
6.3AA
3.8AA Large
1.7Fail
13.8AAA
4.9AA
Black BG
3.3AA Large
5.5AA
12.0AAA
1.5Fail
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

454678
5F6094
BDBDA8
373630
898829

Deuteranopia

423D77
5A5494
BCBAAB
3B402E
95A328

Tritanopia

2F7473
3E9393
B3B1B3
512827
D32625

Achromatopsia

575757
767676
BFBFBF
2A2A2A
585858

Shades & Tints Shades & Tints

#2C667E

Dark
Light

#3A8F96

Dark
Light

#B2CC9D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c667e;
  --color-2: #3a8f96;
  --color-3: #b2cc9d;
  --color-4: #54113a;
  --color-5: #dd1c2d;
}

SCSS

$color-1: #2c667e;
$color-2: #3a8f96;
$color-3: #b2cc9d;
$color-4: #54113a;
$color-5: #dd1c2d;

TAILWIND

colors: {
  'brand-1': '#2c667e',
  'brand-2': '#3a8f96',
  'brand-3': '#b2cc9d',
  'brand-4': '#54113a',
  'brand-5': '#dd1c2d',
}

RGB Array

[44, 102, 126], [58, 143, 150], [178, 204, 157], [84, 17, 58], [221, 28, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #2C667E, #3A8F96, #B2CC9D, #54113A, #DD1C2D 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: #2c667e; --color-2: #3a8f96; --color-3: #b2cc9d; --color-4: #54113a; --color-5: #dd1c2d. 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