← Back to Editor

#D16B78 · #D64054 · #24241C · #565855 · #687871

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

#D16B78

Peach Pink · LightCoral · Coral Red

HEX
#D16B78
RGB
rgb(209, 107, 120)
HSL
hsl(352, 53%, 62%)
HSB
hsb(352, 49%, 82%)
CMYK
cmyk(0%, 49%, 43%, 18%)
Oklch
oklch(65.0% 0.129 13.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D64054

Vermilion · Crimson · Passion Red

HEX
#D64054
RGB
rgb(214, 64, 84)
HSL
hsl(352, 65%, 55%)
HSB
hsb(352, 70%, 84%)
CMYK
cmyk(0%, 70%, 61%, 16%)
Oklch
oklch(59.4% 0.186 17.5)

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

#24241C

Autumn Sage · Black · Amber Gold

HEX
#24241C
RGB
rgb(36, 36, 28)
HSL
hsl(60, 13%, 13%)
HSB
hsb(60, 22%, 14%)
CMYK
cmyk(0%, 0%, 22%, 86%)
Oklch
oklch(25.8% 0.014 107.4)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#565855

Ink Gray · DimGray · Charcoal

HEX
#565855
RGB
rgb(86, 88, 85)
HSL
hsl(100, 2%, 34%)
HSB
hsb(100, 3%, 35%)
CMYK
cmyk(2%, 0%, 3%, 65%)
Oklch
oklch(45.8% 0.005 134.9)

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

#687871

Ink Gray · DimGray · Warm Gray

HEX
#687871
RGB
rgb(104, 120, 113)
HSL
hsl(154, 7%, 44%)
HSB
hsb(154, 13%, 47%)
CMYK
cmyk(13%, 0%, 6%, 53%)
Oklch
oklch(55.7% 0.022 167.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D16B78
6BD1C4

Analogous

D16BAC
D16B78
D1906B

Triadic

D16B78
78D16B
6B78D1

Split-Comp.

D16B78
6BD190
6BACD1

Tetradic

D16B78
ACD16B
6BD1C4
906BD1

Contrast Matrix WCAG 2.1 Contrast

D16B78
D64054
24241C
565855
687871
—
1.3
Fail
4.5
AA
2.1
Fail
1.3
Fail
1.3
Fail
—
3.5
AA Large
1.6
Fail
1.0
Fail
4.5
AA
3.5
AA Large
—
2.2
Fail
3.4
AA Large
2.1
Fail
1.6
Fail
2.2
Fail
—
1.5
Fail
1.3
Fail
1.0
Fail
3.4
AA Large
1.5
Fail
—
White BG
3.5AA Large
4.4AA Large
15.6AAA
7.2AAA
4.7AA
Black BG
6.1AA
4.7AA
1.3Fail
2.9Fail
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A475
95944F
24241E
575756
6F6F73

Deuteranopia

ABB274
9EA94E
24241E
575756
6E6D73

Tritanopia

CC7272
CE4B4B
241F20
565656
697474

Achromatopsia

8B8B8B
6F6F6F
232323
575757
727272

Shades & Tints Shades & Tints

#D16B78

Dark
Light

#D64054

Dark
Light

#24241C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d16b78;
  --color-2: #d64054;
  --color-3: #24241c;
  --color-4: #565855;
  --color-5: #687871;
}

SCSS

$color-1: #d16b78;
$color-2: #d64054;
$color-3: #24241c;
$color-4: #565855;
$color-5: #687871;

TAILWIND

colors: {
  'brand-1': '#d16b78',
  'brand-2': '#d64054',
  'brand-3': '#24241c',
  'brand-4': '#565855',
  'brand-5': '#687871',
}

RGB Array

[209, 107, 120], [214, 64, 84], [36, 36, 28], [86, 88, 85], [104, 120, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D16B78, #D64054, #24241C, #565855, #687871 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: #d16b78; --color-2: #d64054; --color-3: #24241c; --color-4: #565855; --color-5: #687871. 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