← Back to Editor

#D7C780 · #C20562 · #E5482E · #B84482

A 4-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#D7C780

Ginger · BurlyWood · Sunflower

HEX
#D7C780
RGB
rgb(215, 199, 128)
HSL
hsl(49, 52%, 67%)
HSB
hsb(49, 40%, 84%)
CMYK
cmyk(0%, 7%, 40%, 16%)
Oklch
oklch(82.7% 0.093 97.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C20562

Dark Violet · MediumVioletRed · Camellia

HEX
#C20562
RGB
rgb(194, 5, 98)
HSL
hsl(330, 95%, 39%)
HSB
hsb(330, 97%, 76%)
CMYK
cmyk(0%, 97%, 49%, 24%)
Oklch
oklch(52.7% 0.211 1.8)

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

#E5482E

Vermilion · Chocolate · Passion Red

HEX
#E5482E
RGB
rgb(229, 72, 46)
HSL
hsl(9, 78%, 54%)
HSB
hsb(9, 80%, 90%)
CMYK
cmyk(0%, 69%, 80%, 10%)
Oklch
oklch(62.2% 0.198 32.0)

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

#B84482

Rose Purple · MediumVioletRed · Camellia

HEX
#B84482
RGB
rgb(184, 68, 130)
HSL
hsl(328, 46%, 49%)
HSB
hsb(328, 63%, 72%)
CMYK
cmyk(0%, 63%, 29%, 28%)
Oklch
oklch(56.4% 0.163 350.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7C780
7F8FD7

Analogous

D79B7F
D7C780
BBD77F

Triadic

D7C780
7FD7C7
C77FD7

Split-Comp.

D7C780
7FBBD7
9B7FD7

Tetradic

D7C780
7FD79B
7F8FD7
D77FBB

Contrast Matrix WCAG 2.1 Contrast

D7C780
C20562
E5482E
B84482
—
3.5
AA Large
2.3
Fail
3.0
Fail
3.5
AA Large
—
1.5
Fail
1.2
Fail
2.3
Fail
1.5
Fail
—
1.3
Fail
3.0
Fail
1.2
Fail
1.3
Fail
—
White BG
1.7Fail
6.0AA
4.0AA Large
5.0AA
Black BG
12.4AAA
3.5AA Large
5.3AA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D091
706E4B
A1A034
868573

Deuteranopia

D1D295
7B8946
AAB636
8D956F

Tritanopia

D69FA2
B93A36
DD393A
B26765

Achromatopsia

C4C4C4
484848
747474
6E6E6E

Shades & Tints Shades & Tints

#D7C780

Dark
Light

#C20562

Dark
Light

#E5482E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7c780;
  --color-2: #c20562;
  --color-3: #e5482e;
  --color-4: #b84482;
}

SCSS

$color-1: #d7c780;
$color-2: #c20562;
$color-3: #e5482e;
$color-4: #b84482;

TAILWIND

colors: {
  'brand-1': '#d7c780',
  'brand-2': '#c20562',
  'brand-3': '#e5482e',
  'brand-4': '#b84482',
}

RGB Array

[215, 199, 128], [194, 5, 98], [229, 72, 46], [184, 68, 130]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #D7C780, #C20562, #E5482E, #B84482 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d7c780; --color-2: #c20562; --color-3: #e5482e; --color-4: #b84482. 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 4-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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