← Back to Editor

#CD2660 · #DB4D51 · #D5843D · #D2AE2C · #403B51

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 Library

Color Details Color Details

#CD2660

Dark Violet · MediumVioletRed · Camellia

HEX
#CD2660
RGB
rgb(205, 38, 96)
HSL
hsl(339, 69%, 48%)
HSB
hsb(339, 81%, 80%)
CMYK
cmyk(0%, 81%, 53%, 20%)
Oklch
oklch(56.0% 0.202 7.0)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

#DB4D51

Vermilion · Tomato · Passion Red

HEX
#DB4D51
RGB
rgb(219, 77, 81)
HSL
hsl(358, 66%, 58%)
HSB
hsb(358, 65%, 86%)
CMYK
cmyk(0%, 65%, 63%, 14%)
Oklch
oklch(61.6% 0.178 22.4)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#D5843D

Tangerine · Chocolate · Warm Sun

HEX
#D5843D
RGB
rgb(213, 132, 61)
HSL
hsl(28, 64%, 54%)
HSB
hsb(28, 71%, 84%)
CMYK
cmyk(0%, 38%, 71%, 16%)
Oklch
oklch(68.6% 0.131 58.9)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#D2AE2C

Ochre · GoldenRod · Honey Gold

HEX
#D2AE2C
RGB
rgb(210, 174, 44)
HSL
hsl(47, 65%, 50%)
HSB
hsb(47, 79%, 82%)
CMYK
cmyk(0%, 17%, 79%, 18%)
Oklch
oklch(76.2% 0.144 92.3)

TraditionalOchre」· PaintHoney Gold」· Creative Blush Sunrise

#403B51

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#403B51
RGB
rgb(64, 59, 81)
HSL
hsl(254, 16%, 27%)
HSB
hsb(254, 27%, 32%)
CMYK
cmyk(21%, 27%, 0%, 68%)
Oklch
oklch(36.7% 0.038 294.9)

TraditionalDeep Indigo」· PaintPrussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CD2660
26CF94

Analogous

CF26B6
CD2660
CF3F26

Triadic

CD2660
61CF26
2661CF

Split-Comp.

CD2660
26CF3F
26B6CF

Tetradic

CD2660
B6CF26
26CF94
3F26CF

Contrast Matrix WCAG 2.1 Contrast

CD2660
DB4D51
D5843D
D2AE2C
403B51
1.3
Fail
1.8
Fail
2.4
Fail
2.1
Fail
1.3
Fail
1.4
Fail
1.9
Fail
2.6
Fail
1.8
Fail
1.4
Fail
1.4
Fail
3.7
AA Large
2.4
Fail
1.9
Fail
1.4
Fail
5.0
AA
2.1
Fail
2.6
Fail
3.7
AA Large
5.0
AA
White BG
5.2AA
4.0AA Large
2.9Fail
2.1Fail
10.7AAA
Black BG
4.0AA Large
5.2AA
7.2AAA
9.8AAA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

858352
9E9C50
B2B14E
C2C24B
3E3E4C

Deuteranopia

8E9B4F
A6B050
B7BD52
C5C753
3E3F4A

Tritanopia

C54744
D44F4F
D15C5F
D0646A
404747

Achromatopsia

5F5F5F
787878
949494
AAAAAA
3F3F3F

Shades & Tints Shades & Tints

#CD2660

Dark
Light

#DB4D51

Dark
Light

#D5843D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cd2660;
  --color-2: #db4d51;
  --color-3: #d5843d;
  --color-4: #d2ae2c;
  --color-5: #403b51;
}

SCSS

$color-1: #cd2660;
$color-2: #db4d51;
$color-3: #d5843d;
$color-4: #d2ae2c;
$color-5: #403b51;

TAILWIND

colors: {
  'brand-1': '#cd2660',
  'brand-2': '#db4d51',
  'brand-3': '#d5843d',
  'brand-4': '#d2ae2c',
  'brand-5': '#403b51',
}

RGB Array

[205, 38, 96], [219, 77, 81], [213, 132, 61], [210, 174, 44], [64, 59, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CD2660, #DB4D51, #D5843D, #D2AE2C, #403B51 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: #cd2660; --color-2: #db4d51; --color-3: #d5843d; --color-4: #d2ae2c; --color-5: #403b51. 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