← Back to Editor

#DD1D6B · #E56161 · #E89567 · #A37662 · #4C3B42

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 Library

Color Details Color Details

#DD1D6B

Dark Violet · MediumVioletRed · Camellia

HEX
#DD1D6B
RGB
rgb(221, 29, 107)
HSL
hsl(336, 77%, 49%)
HSB
hsb(336, 87%, 87%)
CMYK
cmyk(0%, 87%, 52%, 13%)
Oklch
oklch(58.6% 0.223 4.7)

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

#E56161

Peach Pink · Tomato · Coral Red

HEX
#E56161
RGB
rgb(229, 97, 97)
HSL
hsl(0, 72%, 64%)
HSB
hsb(0, 58%, 90%)
CMYK
cmyk(0%, 58%, 58%, 10%)
Oklch
oklch(65.9% 0.165 22.7)

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

#E89567

Apricot · DarkSalmon · Warm Sun

HEX
#E89567
RGB
rgb(232, 149, 103)
HSL
hsl(21, 74%, 66%)
HSB
hsb(21, 56%, 91%)
CMYK
cmyk(0%, 36%, 56%, 9%)
Oklch
oklch(74.4% 0.118 49.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#A37662

Tangerine · Gray · Warm Sun

HEX
#A37662
RGB
rgb(163, 118, 98)
HSL
hsl(18, 26%, 51%)
HSB
hsb(18, 40%, 64%)
CMYK
cmyk(0%, 28%, 40%, 36%)
Oklch
oklch(60.6% 0.064 45.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#4C3B42

Dark Violet · DarkSlateGray · Camellia

HEX
#4C3B42
RGB
rgb(76, 59, 66)
HSL
hsl(335, 13%, 26%)
HSB
hsb(335, 22%, 30%)
CMYK
cmyk(0%, 22%, 13%, 70%)
Oklch
oklch(37.3% 0.026 351.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DD1D6B
1DDD90

Analogous

DD1DCA
DD1D6B
DD301D

Triadic

DD1D6B
6ADD1D
1D6ADD

Split-Comp.

DD1D6B
1DDD30
1DCADD

Tetradic

DD1D6B
CADD1D
1DDD90
301DDD

Contrast Matrix WCAG 2.1 Contrast

DD1D6B
E56161
E89567
A37662
4C3B42
—
1.4
Fail
2.0
Fail
1.2
Fail
2.2
Fail
1.4
Fail
—
1.4
Fail
1.2
Fail
3.1
AA Large
2.0
Fail
1.4
Fail
—
1.7
Fail
4.4
AA Large
1.2
Fail
1.2
Fail
1.7
Fail
—
2.6
Fail
2.2
Fail
3.1
AA Large
4.4
AA Large
2.6
Fail
—
White BG
4.7AA
3.4AA Large
2.4Fail
3.9AA Large
10.4AAA
Black BG
4.5AA Large
6.2AA
8.9AAA
5.3AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8858
ACAB61
C4C372
908F67
454440

Deuteranopia

95A354
B4BD61
C9CF75
929668
464740

Tritanopia

D34946
DE6161
E47B7D
A16B6C
4B3F3F

Achromatopsia

5F5F5F
888888
A9A9A9
818181
414141

Shades & Tints Shades & Tints

#DD1D6B

Dark
Light

#E56161

Dark
Light

#E89567

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dd1d6b;
  --color-2: #e56161;
  --color-3: #e89567;
  --color-4: #a37662;
  --color-5: #4c3b42;
}

SCSS

$color-1: #dd1d6b;
$color-2: #e56161;
$color-3: #e89567;
$color-4: #a37662;
$color-5: #4c3b42;

TAILWIND

colors: {
  'brand-1': '#dd1d6b',
  'brand-2': '#e56161',
  'brand-3': '#e89567',
  'brand-4': '#a37662',
  'brand-5': '#4c3b42',
}

RGB Array

[221, 29, 107], [229, 97, 97], [232, 149, 103], [163, 118, 98], [76, 59, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DD1D6B, #E56161, #E89567, #A37662, #4C3B42 is ideal for: corporate websites, product showcases, portfolios. 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: #dd1d6b; --color-2: #e56161; --color-3: #e89567; --color-4: #a37662; --color-5: #4c3b42. 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. 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