← Back to Editor

#DB4F6D · #2F2628 · #B83556 · #927083 · #5A9DA5

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

#DB4F6D

Vermilion · Tomato · Passion Red

HEX
#DB4F6D
RGB
rgb(219, 79, 109)
HSL
hsl(347, 66%, 58%)
HSB
hsb(347, 64%, 86%)
CMYK
cmyk(0%, 64%, 50%, 14%)
Oklch
oklch(62.4% 0.175 10.9)

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

#2F2628

Crimson · DarkSlateGray · Deep Berry

HEX
#2F2628
RGB
rgb(47, 38, 40)
HSL
hsl(347, 11%, 17%)
HSB
hsb(347, 19%, 18%)
CMYK
cmyk(0%, 19%, 15%, 82%)
Oklch
oklch(28.0% 0.014 3.0)

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

#B83556

Crimson · Brown · Passion Red

HEX
#B83556
RGB
rgb(184, 53, 86)
HSL
hsl(345, 55%, 46%)
HSB
hsb(345, 71%, 72%)
CMYK
cmyk(0%, 71%, 53%, 28%)
Oklch
oklch(53.3% 0.168 10.1)

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

#927083

Rose Purple · Gray · Rose Pink

HEX
#927083
RGB
rgb(146, 112, 131)
HSL
hsl(326, 13%, 51%)
HSB
hsb(326, 23%, 57%)
CMYK
cmyk(0%, 23%, 10%, 43%)
Oklch
oklch(58.5% 0.050 344.2)

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

#5A9DA5

Slate Blue · CadetBlue · Mint Ice

HEX
#5A9DA5
RGB
rgb(90, 157, 165)
HSL
hsl(186, 29%, 50%)
HSB
hsb(186, 45%, 65%)
CMYK
cmyk(45%, 5%, 0%, 35%)
Oklch
oklch(65.5% 0.069 205.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DB4F6D
4DDBBC

Analogous

DB4DB3
DB4F6D
DB754D

Triadic

DB4F6D
6CDB4D
4D6CDB

Split-Comp.

DB4F6D
4DDB75
4DB3DB

Tetradic

DB4F6D
B3DB4D
4DDBBC
754DDB

Contrast Matrix WCAG 2.1 Contrast

DB4F6D
2F2628
B83556
927083
5A9DA5
—
3.7
AA Large
1.5
Fail
1.1
Fail
1.3
Fail
3.7
AA Large
—
2.6
Fail
3.4
AA Large
4.8
AA
1.5
Fail
2.6
Fail
—
1.3
Fail
1.8
Fail
1.1
Fail
3.4
AA Large
1.3
Fail
—
1.4
Fail
1.3
Fail
4.8
AA
1.8
Fail
1.4
Fail
—
White BG
3.9AA Large
14.7AAA
5.7AA
4.3AA Large
3.1AA Large
Black BG
5.4AA
1.4Fail
3.7AA Large
4.9AA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9D66
2B2B28
7F7E4E
83837E
7778A3

Deuteranopia

A7B164
2C2C27
87914C
85887D
736EA3

Tritanopia

D4605F
2F2727
B14846
907B7A
5DA2A1

Achromatopsia

7C7C7C
292929
606060
7C7C7C
8A8A8A

Shades & Tints Shades & Tints

#DB4F6D

Dark
Light

#2F2628

Dark
Light

#B83556

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #db4f6d;
  --color-2: #2f2628;
  --color-3: #b83556;
  --color-4: #927083;
  --color-5: #5a9da5;
}

SCSS

$color-1: #db4f6d;
$color-2: #2f2628;
$color-3: #b83556;
$color-4: #927083;
$color-5: #5a9da5;

TAILWIND

colors: {
  'brand-1': '#db4f6d',
  'brand-2': '#2f2628',
  'brand-3': '#b83556',
  'brand-4': '#927083',
  'brand-5': '#5a9da5',
}

RGB Array

[219, 79, 109], [47, 38, 40], [184, 53, 86], [146, 112, 131], [90, 157, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DB4F6D, #2F2628, #B83556, #927083, #5A9DA5 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: #db4f6d; --color-2: #2f2628; --color-3: #b83556; --color-4: #927083; --color-5: #5a9da5. 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