← Back to Editor

#DB4468 · #CA2426 · #D8613F · #E2BF89 · #F2F6C9

A 5-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 AppData Visualization

Color Details Color Details

#DB4468

Vermilion · Tomato · Passion Red

HEX
#DB4468
RGB
rgb(219, 68, 104)
HSL
hsl(346, 68%, 56%)
HSB
hsb(346, 69%, 86%)
CMYK
cmyk(0%, 69%, 53%, 14%)
Oklch
oklch(61.1% 0.188 10.6)

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

#CA2426

Vermilion · FireBrick · Passion Red

HEX
#CA2426
RGB
rgb(202, 36, 38)
HSL
hsl(359, 70%, 47%)
HSB
hsb(359, 82%, 79%)
CMYK
cmyk(0%, 82%, 81%, 21%)
Oklch
oklch(54.3% 0.200 26.7)

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

#D8613F

Vermilion · Chocolate · Passion Red

HEX
#D8613F
RGB
rgb(216, 97, 63)
HSL
hsl(13, 66%, 55%)
HSB
hsb(13, 71%, 85%)
CMYK
cmyk(0%, 55%, 71%, 15%)
Oklch
oklch(63.4% 0.158 36.7)

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

#E2BF89

Goose Yellow · BurlyWood · Warm Sun

HEX
#E2BF89
RGB
rgb(226, 191, 137)
HSL
hsl(36, 61%, 71%)
HSB
hsb(36, 39%, 89%)
CMYK
cmyk(0%, 15%, 39%, 11%)
Oklch
oklch(82.2% 0.081 78.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F2F6C9

Fresh Green · Beige · Lemon Cream

HEX
#F2F6C9
RGB
rgb(242, 246, 201)
HSL
hsl(65, 71%, 88%)
HSB
hsb(65, 18%, 96%)
CMYK
cmyk(2%, 0%, 18%, 4%)
Oklch
oklch(95.9% 0.059 111.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DB4468
43DBB7

Analogous

DB43B2
DB4468
DB6B43

Triadic

DB4468
66DB43
4366DB

Split-Comp.

DB4468
43DB6B
43B2DB

Tetradic

DB4468
B2DB43
43DBB7
6B43DB

Contrast Matrix WCAG 2.1 Contrast

DB4468
CA2426
D8613F
E2BF89
F2F6C9
—
1.3
Fail
1.1
Fail
2.4
Fail
3.7
AA Large
1.3
Fail
—
1.5
Fail
3.2
AA Large
5.0
AA
1.1
Fail
1.5
Fail
—
2.1
Fail
3.3
AA Large
2.4
Fail
3.2
AA Large
2.1
Fail
—
1.6
Fail
3.7
AA Large
5.0
AA
3.3
AA Large
1.6
Fail
—
White BG
4.2AA Large
5.5AA
3.7AA Large
1.7Fail
1.1Fail
Black BG
5.0AA
3.8AA Large
5.7AA
12.0AAA
18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A985F
828126
A4A347
D3D396
F4F4D4

Deuteranopia

A2AE5D
8C9825
ABB449
D5D899
F4F3D7

Tritanopia

D35857
C22525
D24E4F
E0A0A3
F2DCDE

Achromatopsia

757575
565656
818181
C3C3C3
F0F0F0

Shades & Tints Shades & Tints

#DB4468

Dark
Light

#CA2426

Dark
Light

#D8613F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #db4468;
  --color-2: #ca2426;
  --color-3: #d8613f;
  --color-4: #e2bf89;
  --color-5: #f2f6c9;
}

SCSS

$color-1: #db4468;
$color-2: #ca2426;
$color-3: #d8613f;
$color-4: #e2bf89;
$color-5: #f2f6c9;

TAILWIND

colors: {
  'brand-1': '#db4468',
  'brand-2': '#ca2426',
  'brand-3': '#d8613f',
  'brand-4': '#e2bf89',
  'brand-5': '#f2f6c9',
}

RGB Array

[219, 68, 104], [202, 36, 38], [216, 97, 63], [226, 191, 137], [242, 246, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DB4468, #CA2426, #D8613F, #E2BF89, #F2F6C9 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #db4468; --color-2: #ca2426; --color-3: #d8613f; --color-4: #e2bf89; --color-5: #f2f6c9. 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 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