← Back to Editor

#DD97B3 · #B17C91 · #856270 · #58474E · #2C2C2C

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

#DD97B3

Rouge · LightPink · Rose Pink

HEX
#DD97B3
RGB
rgb(221, 151, 179)
HSL
hsl(336, 51%, 73%)
HSB
hsb(336, 32%, 87%)
CMYK
cmyk(0%, 32%, 19%, 13%)
Oklch
oklch(75.3% 0.091 353.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#B17C91

Dark Violet · DarkGray · Rose Pink

HEX
#B17C91
RGB
rgb(177, 124, 145)
HSL
hsl(336, 25%, 59%)
HSB
hsb(336, 30%, 69%)
CMYK
cmyk(0%, 30%, 18%, 31%)
Oklch
oklch(64.6% 0.071 353.8)

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

#856270

Dark Violet · DimGray · Camellia

HEX
#856270
RGB
rgb(133, 98, 112)
HSL
hsl(336, 15%, 45%)
HSB
hsb(336, 26%, 52%)
CMYK
cmyk(0%, 26%, 16%, 48%)
Oklch
oklch(53.6% 0.049 353.1)

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

#58474E

Dark Violet · DarkSlateGray · Camellia

HEX
#58474E
RGB
rgb(88, 71, 78)
HSL
hsl(335, 11%, 31%)
HSB
hsb(335, 19%, 35%)
CMYK
cmyk(0%, 19%, 11%, 65%)
Oklch
oklch(41.8% 0.026 351.6)

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

#2C2C2C

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2C2C2C
RGB
rgb(44, 44, 44)
HSL
hsl(0, 0%, 17%)
HSB
hsb(0, 0%, 17%)
CMYK
cmyk(0%, 0%, 0%, 83%)
Oklch
oklch(29.3% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DD97B3
97DDC1

Analogous

DD97D6
DD97B3
DD9E97

Triadic

DD97B3
B3DD97
97B3DD

Split-Comp.

DD97B3
97DD9E
97D6DD

Tetradic

DD97B3
D6DD97
97DDC1
9E97DD

Contrast Matrix WCAG 2.1 Contrast

DD97B3
B17C91
856270
58474E
2C2C2C
—
1.5
Fail
2.3
Fail
3.8
AA Large
6.1
AA
1.5
Fail
—
1.5
Fail
2.5
Fail
4.1
AA Large
2.3
Fail
1.5
Fail
—
1.6
Fail
2.6
Fail
3.8
AA Large
2.5
Fail
1.6
Fail
—
1.6
Fail
6.1
AA
4.1
AA Large
2.6
Fail
1.6
Fail
—
White BG
2.3Fail
3.4AA Large
5.3AA
8.7AAA
14.0AAA
Black BG
9.2AAA
6.2AA
4.0AA Large
2.4Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBEAC
9A9A8C
76766D
51504C
2C2C2C

Deuteranopia

C3C8AB
9DA18B
787B6C
52534C
2C2C2C

Tritanopia

DAA7A6
AE8887
836A69
574B4B
2C2C2C

Achromatopsia

AFAFAF
8E8E8E
6E6E6E
4D4D4D
2C2C2C

Shades & Tints Shades & Tints

#DD97B3

Dark
Light

#B17C91

Dark
Light

#856270

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dd97b3;
  --color-2: #b17c91;
  --color-3: #856270;
  --color-4: #58474e;
  --color-5: #2c2c2c;
}

SCSS

$color-1: #dd97b3;
$color-2: #b17c91;
$color-3: #856270;
$color-4: #58474e;
$color-5: #2c2c2c;

TAILWIND

colors: {
  'brand-1': '#dd97b3',
  'brand-2': '#b17c91',
  'brand-3': '#856270',
  'brand-4': '#58474e',
  'brand-5': '#2c2c2c',
}

RGB Array

[221, 151, 179], [177, 124, 145], [133, 98, 112], [88, 71, 78], [44, 44, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DD97B3, #B17C91, #856270, #58474E, #2C2C2C is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dd97b3; --color-2: #b17c91; --color-3: #856270; --color-4: #58474e; --color-5: #2c2c2c. 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. Restrained colors convey professionalism and trust. 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