← Back to Editor

#DE3C6A · #1F1717 · #57AB81 · #B0E082 · #FFF59E

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

#DE3C6A

Dark Violet · MediumVioletRed · Rose Pink

HEX
#DE3C6A
RGB
rgb(222, 60, 106)
HSL
hsl(343, 71%, 55%)
HSB
hsb(343, 73%, 87%)
CMYK
cmyk(0%, 73%, 52%, 13%)
Oklch
oklch(60.8% 0.199 8.7)

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

#1F1717

Crimson · Black · Deep Berry

HEX
#1F1717
RGB
rgb(31, 23, 23)
HSL
hsl(0, 15%, 11%)
HSB
hsb(0, 26%, 12%)
CMYK
cmyk(0%, 26%, 26%, 88%)
Oklch
oklch(21.5% 0.013 18.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#57AB81

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#57AB81
RGB
rgb(87, 171, 129)
HSL
hsl(150, 33%, 51%)
HSB
hsb(150, 49%, 67%)
CMYK
cmyk(49%, 0%, 25%, 33%)
Oklch
oklch(67.7% 0.104 160.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B0E082

Emerald · LightGreen · Apple Green

HEX
#B0E082
RGB
rgb(176, 224, 130)
HSL
hsl(91, 60%, 69%)
HSB
hsb(91, 42%, 88%)
CMYK
cmyk(21%, 0%, 42%, 12%)
Oklch
oklch(85.2% 0.132 130.8)

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

#FFF59E

Fresh Green · Khaki · Lemon Cream

HEX
#FFF59E
RGB
rgb(255, 245, 158)
HSL
hsl(54, 100%, 81%)
HSB
hsb(54, 38%, 100%)
CMYK
cmyk(0%, 4%, 38%, 0%)
Oklch
oklch(95.9% 0.108 102.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE3C6A
3BDEB0

Analogous

DE3BBA
DE3C6A
DE5E3B

Triadic

DE3C6A
69DE3B
3B69DE

Split-Comp.

DE3C6A
3BDE5E
3BBADE

Tetradic

DE3C6A
BADE3B
3BDEB0
5E3BDE

Contrast Matrix WCAG 2.1 Contrast

DE3C6A
1F1717
57AB81
B0E082
FFF59E
—
4.2
AA Large
1.5
Fail
2.8
Fail
3.8
AA Large
4.2
AA Large
—
6.3
AA
11.6
AAA
15.8
AAA
1.5
Fail
6.3
AA
—
1.8
Fail
2.5
Fail
2.8
Fail
11.6
AAA
1.8
Fail
—
1.4
Fail
3.8
AA Large
15.8
AAA
2.5
Fail
1.4
Fail
—
White BG
4.2AA Large
17.6AAA
2.8Fail
1.5Fail
1.1Fail
Black BG
5.0AA
1.2Fail
7.5AAA
13.8AAA
18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

98965F
1C1B17
7B7C8B
C5C599
FBFBB3

Deuteranopia

A1AD5C
1C1D17
77708E
C2BE9E
FBFCB8

Tritanopia

D65654
1F1717
5B9395
B2ABAF
FFC4C7

Achromatopsia

727272
191919
8D8D8D
C7C7C7
EEEEEE

Shades & Tints Shades & Tints

#DE3C6A

Dark
Light

#1F1717

Dark
Light

#57AB81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de3c6a;
  --color-2: #1f1717;
  --color-3: #57ab81;
  --color-4: #b0e082;
  --color-5: #fff59e;
}

SCSS

$color-1: #de3c6a;
$color-2: #1f1717;
$color-3: #57ab81;
$color-4: #b0e082;
$color-5: #fff59e;

TAILWIND

colors: {
  'brand-1': '#de3c6a',
  'brand-2': '#1f1717',
  'brand-3': '#57ab81',
  'brand-4': '#b0e082',
  'brand-5': '#fff59e',
}

RGB Array

[222, 60, 106], [31, 23, 23], [87, 171, 129], [176, 224, 130], [255, 245, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE3C6A, #1F1717, #57AB81, #B0E082, #FFF59E 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: #de3c6a; --color-2: #1f1717; --color-3: #57ab81; --color-4: #b0e082; --color-5: #fff59e. 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