#DE1D44 + #B82C73 + #A6678C + #93BCCD + #D0CCDF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DE1D44

Vermilion · Crimson · Passion Red

HEX

#DE1D44

RGB

rgb(222, 29, 68)

HSL

hsl(348, 77%, 49%)

HSB

hsb(348, 87%, 87%)

CMYK

cmyk(0%, 87%, 69%, 13%)

Oklch

oklch(58.0% 0.220 18.6)

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

#B82C73

Dark Violet · MediumVioletRed · Camellia

HEX

#B82C73

RGB

rgb(184, 44, 115)

HSL

hsl(330, 61%, 45%)

HSB

hsb(330, 76%, 72%)

CMYK

cmyk(0%, 76%, 38%, 28%)

Oklch

oklch(53.4% 0.186 354.6)

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

#A6678C

Rose Purple · Gray · Rose Pink

HEX

#A6678C

RGB

rgb(166, 103, 140)

HSL

hsl(325, 26%, 53%)

HSB

hsb(325, 38%, 65%)

CMYK

cmyk(0%, 38%, 16%, 35%)

Oklch

oklch(59.4% 0.094 344.2)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#93BCCD

Sky Blue · LightSteelBlue · Lake Green

HEX

#93BCCD

RGB

rgb(147, 188, 205)

HSL

hsl(198, 37%, 69%)

HSB

hsb(198, 28%, 80%)

CMYK

cmyk(28%, 8%, 0%, 20%)

Oklch

oklch(77.1% 0.050 225.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D0CCDF

Wisteria · LightGray · Sky Blue

HEX

#D0CCDF

RGB

rgb(208, 204, 223)

HSL

hsl(253, 23%, 84%)

HSB

hsb(253, 9%, 87%)

CMYK

cmyk(7%, 9%, 0%, 13%)

Oklch

oklch(85.4% 0.026 295.5)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE1D44

1DDDB7

Analogous

DD1DA3

DE1D44

DD561D

Triadic

DE1D44

43DD1D

1D43DD

Split-Comp.

DE1D44

1DDD56

1DA3DD

Tetradic

DE1D44

A3DD1D

1DDDB7

561DDD

Contrast Matrix WCAG 2.1 Contrast

DE1D44	B82C73	A6678C	93BCCD	D0CCDF
—	1.2 Fail	1.1 Fail	2.4 Fail	3.1 AA Large
1.2 Fail	—	1.4 Fail	2.8 Fail	3.7 AA Large
1.1 Fail	1.4 Fail	—	2.1 Fail	2.7 Fail
2.4 Fail	2.8 Fail	2.1 Fail	—	1.3 Fail
3.1 AA Large	3.7 AA Large	2.7 Fail	1.3 Fail	—

White BG

4.8AA

5.8AA

4.3AA Large

2.0Fail

1.6Fail

Black BG

4.4AA Large

3.6AA Large

4.9AA

10.3AAA

13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A893B

7B7A62

8B8A83

A5A5C9

CECEDA

Deuteranopia

96A438

848E5E

8E9381

A29FC8

CFCFD9

Tritanopia

D43331

B15451

A37C7A

95C6C5

D0D7D6

Achromatopsia

5B5B5B

5E5E5E

7E7E7E

B2B2B2

CFCFCF

Shades & Tints Shades & Tints

#DE1D44

Dark

Light

#B82C73

Dark

Light

#A6678C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de1d44;
  --color-2: #b82c73;
  --color-3: #a6678c;
  --color-4: #93bccd;
  --color-5: #d0ccdf;
}

SCSS

$color-1: #de1d44;
$color-2: #b82c73;
$color-3: #a6678c;
$color-4: #93bccd;
$color-5: #d0ccdf;

TAILWIND

colors: {
  'brand-1': '#de1d44',
  'brand-2': '#b82c73',
  'brand-3': '#a6678c',
  'brand-4': '#93bccd',
  'brand-5': '#d0ccdf',
}

RGB Array

[222, 29, 68], [184, 44, 115], [166, 103, 140], [147, 188, 205], [208, 204, 223]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE1D44, #B82C73, #A6678C, #93BCCD, #D0CCDF 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: #de1d44; --color-2: #b82c73; --color-3: #a6678c; --color-4: #93bccd; --color-5: #d0ccdf. 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