← Back to Editor

#D45573 · #BA8389 · #C4ABA6 · #66677B · #594838

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

#D45573

Crimson · LightCoral · Passion Red

HEX
#D45573
RGB
rgb(212, 85, 115)
HSL
hsl(346, 60%, 58%)
HSB
hsb(346, 60%, 83%)
CMYK
cmyk(0%, 60%, 46%, 17%)
Oklch
oklch(62.2% 0.161 8.5)

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

#BA8389

Peach Pink · DarkGray · Coral Red

HEX
#BA8389
RGB
rgb(186, 131, 137)
HSL
hsl(353, 28%, 62%)
HSB
hsb(353, 30%, 73%)
CMYK
cmyk(0%, 30%, 26%, 27%)
Oklch
oklch(66.6% 0.068 11.9)

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

#C4ABA6

Peach Pink · DarkGray · Coral Red

HEX
#C4ABA6
RGB
rgb(196, 171, 166)
HSL
hsl(10, 20%, 71%)
HSB
hsb(10, 15%, 77%)
CMYK
cmyk(0%, 13%, 15%, 23%)
Oklch
oklch(76.1% 0.030 31.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#66677B

Indigo · DimGray · Warm Gray

HEX
#66677B
RGB
rgb(102, 103, 123)
HSL
hsl(237, 9%, 44%)
HSB
hsb(237, 17%, 48%)
CMYK
cmyk(17%, 16%, 0%, 52%)
Oklch
oklch(52.0% 0.031 283.0)

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

#594838

Tangerine · DarkOliveGreen · Amber Brown

HEX
#594838
RGB
rgb(89, 72, 56)
HSL
hsl(29, 23%, 28%)
HSB
hsb(29, 37%, 35%)
CMYK
cmyk(0%, 19%, 37%, 65%)
Oklch
oklch(41.5% 0.034 64.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D45573
54D4B6

Analogous

D454B2
D45573
D47654

Triadic

D45573
72D454
5472D4

Split-Comp.

D45573
54D476
54B2D4

Tetradic

D45573
B2D454
54D4B6
7654D4

Contrast Matrix WCAG 2.1 Contrast

D45573
BA8389
C4ABA6
66677B
594838
—
1.3
Fail
1.8
Fail
1.4
Fail
2.2
Fail
1.3
Fail
—
1.5
Fail
1.8
Fail
2.8
Fail
1.8
Fail
1.5
Fail
—
2.6
Fail
4.0
AA Large
1.4
Fail
1.8
Fail
2.6
Fail
—
1.6
Fail
2.2
Fail
2.8
Fail
4.0
AA Large
1.6
Fail
—
White BG
3.9AA Large
3.1AA Large
2.2Fail
5.5AA
8.7AAA
Black BG
5.3AA
6.7AA
9.7AAA
3.8AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9C6C
A2A288
B9B9A7
666676
52513C

Deuteranopia

A4AE6A
A5AA87
BBBDA8
666675
53543D

Tritanopia

CE6665
B78686
C3A8A8
667272
583F40

Achromatopsia

7E7E7E
949494
B2B2B2
696969
4B4B4B

Shades & Tints Shades & Tints

#D45573

Dark
Light

#BA8389

Dark
Light

#C4ABA6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d45573;
  --color-2: #ba8389;
  --color-3: #c4aba6;
  --color-4: #66677b;
  --color-5: #594838;
}

SCSS

$color-1: #d45573;
$color-2: #ba8389;
$color-3: #c4aba6;
$color-4: #66677b;
$color-5: #594838;

TAILWIND

colors: {
  'brand-1': '#d45573',
  'brand-2': '#ba8389',
  'brand-3': '#c4aba6',
  'brand-4': '#66677b',
  'brand-5': '#594838',
}

RGB Array

[212, 85, 115], [186, 131, 137], [196, 171, 166], [102, 103, 123], [89, 72, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D45573, #BA8389, #C4ABA6, #66677B, #594838 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: #d45573; --color-2: #ba8389; --color-3: #c4aba6; --color-4: #66677b; --color-5: #594838. 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