← Back to Editor

#F0DF91 · #E62239 · #781D2F · #380B20 · #21051F

warm

A 5-color warm 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

#F0DF91

Goose Yellow · Khaki · Sunflower

HEX
#F0DF91
RGB
rgb(240, 223, 145)
HSL
hsl(49, 76%, 75%)
HSB
hsb(49, 40%, 94%)
CMYK
cmyk(0%, 7%, 40%, 6%)
Oklch
oklch(90.0% 0.100 97.4)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E62239

Vermilion · Crimson · Passion Red

HEX
#E62239
RGB
rgb(230, 34, 57)
HSL
hsl(353, 80%, 52%)
HSB
hsb(353, 85%, 90%)
CMYK
cmyk(0%, 85%, 75%, 10%)
Oklch
oklch(59.5% 0.224 22.8)

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

#781D2F

Vermilion · Brown · Wine Red

HEX
#781D2F
RGB
rgb(120, 29, 47)
HSL
hsl(348, 61%, 29%)
HSB
hsb(348, 76%, 47%)
CMYK
cmyk(0%, 76%, 61%, 53%)
Oklch
oklch(38.6% 0.125 14.1)

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

#380B20

Dark Violet · Black · Raspberry

HEX
#380B20
RGB
rgb(56, 11, 32)
HSL
hsl(332, 67%, 13%)
HSB
hsb(332, 80%, 22%)
CMYK
cmyk(0%, 80%, 43%, 78%)
Oklch
oklch(23.8% 0.075 355.7)

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

#21051F

Rose Purple · Black · Dark Purple

HEX
#21051F
RGB
rgb(33, 5, 31)
HSL
hsl(304, 74%, 7%)
HSB
hsb(304, 85%, 13%)
CMYK
cmyk(0%, 85%, 6%, 87%)
Oklch
oklch(18.3% 0.064 330.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0DF91
8FA1F0

Analogous

F0AD8F
F0DF91
D1F08F

Triadic

F0DF91
8FF0DE
DE8FF0

Split-Comp.

F0DF91
8FD1F0
AD8FF0

Tetradic

F0DF91
8FF0AD
8FA1F0
F08FD1

Contrast Matrix WCAG 2.1 Contrast

F0DF91
E62239
781D2F
380B20
21051F
—
3.4
AA Large
7.8
AAA
12.7
AAA
14.2
AAA
3.4
AA Large
—
2.3
Fail
3.8
AA Large
4.2
AA Large
7.8
AAA
2.3
Fail
—
1.6
Fail
1.8
Fail
12.7
AAA
3.8
AA Large
1.6
Fail
—
1.1
Fail
14.2
AAA
4.2
AA Large
1.8
Fail
1.1
Fail
—
White BG
1.3Fail
4.5AA
10.4AAA
17.0AAA
19.0AAA
Black BG
15.7AAA
4.7AA
2.0Fail
1.2Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E8A4
918F33
51502B
25241B
151519

Deuteranopia

EAEBA8
9DAB32
565D2A
272A1A
171917

Tritanopia

EFB3B6
DC2F2E
732726
361716
201413

Achromatopsia

DBDBDB
5F5F5F
3A3A3A
1B1B1B
101010

Shades & Tints Shades & Tints

#F0DF91

Dark
Light

#E62239

Dark
Light

#781D2F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0df91;
  --color-2: #e62239;
  --color-3: #781d2f;
  --color-4: #380b20;
  --color-5: #21051f;
}

SCSS

$color-1: #f0df91;
$color-2: #e62239;
$color-3: #781d2f;
$color-4: #380b20;
$color-5: #21051f;

TAILWIND

colors: {
  'brand-1': '#f0df91',
  'brand-2': '#e62239',
  'brand-3': '#781d2f',
  'brand-4': '#380b20',
  'brand-5': '#21051f',
}

RGB Array

[240, 223, 145], [230, 34, 57], [120, 29, 47], [56, 11, 32], [33, 5, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F0DF91, #E62239, #781D2F, #380B20, #21051F is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #f0df91; --color-2: #e62239; --color-3: #781d2f; --color-4: #380b20; --color-5: #21051f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 warm-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