← Back to Editor

#DE4448 · #FA5454 · #FAA254 · #FAF6AF · #F7FCEF

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 App

Color Details Color Details

#DE4448

Vermilion · Tomato · Passion Red

HEX
#DE4448
RGB
rgb(222, 68, 72)
HSL
hsl(358, 70%, 57%)
HSB
hsb(358, 69%, 87%)
CMYK
cmyk(0%, 69%, 68%, 13%)
Oklch
oklch(60.9% 0.191 23.5)

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

#FA5454

Peach Pink · Tomato · Coral Red

HEX
#FA5454
RGB
rgb(250, 84, 84)
HSL
hsl(0, 94%, 65%)
HSB
hsb(0, 66%, 98%)
CMYK
cmyk(0%, 66%, 66%, 2%)
Oklch
oklch(67.3% 0.202 24.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FAA254

Apricot · SandyBrown · Warm Sun

HEX
#FAA254
RGB
rgb(250, 162, 84)
HSL
hsl(28, 94%, 65%)
HSB
hsb(28, 66%, 98%)
CMYK
cmyk(0%, 35%, 66%, 2%)
Oklch
oklch(78.6% 0.140 60.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FAF6AF

Fresh Green · Wheat · Lemon Cream

HEX
#FAF6AF
RGB
rgb(250, 246, 175)
HSL
hsl(57, 88%, 83%)
HSB
hsb(57, 30%, 98%)
CMYK
cmyk(0%, 2%, 30%, 2%)
Oklch
oklch(96.0% 0.090 105.2)

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

#F7FCEF

Willow Green · SeaShell · Mint Green

HEX
#F7FCEF
RGB
rgb(247, 252, 239)
HSL
hsl(83, 68%, 96%)
HSB
hsb(83, 5%, 99%)
CMYK
cmyk(2%, 0%, 5%, 1%)
Oklch
oklch(98.4% 0.018 124.0)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE4448
45DED9

Analogous

DE4596
DE4448
DE8C45

Triadic

DE4448
4ADE45
454ADE

Split-Comp.

DE4448
45DE8C
4596DE

Tetradic

DE4448
96DE45
45DED9
8C45DE

Contrast Matrix WCAG 2.1 Contrast

DE4448
FA5454
FAA254
FAF6AF
F7FCEF
—
1.3
Fail
2.1
Fail
3.8
AA Large
4.0
AA Large
1.3
Fail
—
1.6
Fail
2.9
Fail
3.1
AA Large
2.1
Fail
1.6
Fail
—
1.8
Fail
1.9
Fail
3.8
AA Large
2.9
Fail
1.8
Fail
—
1.1
Fail
4.0
AA Large
3.1
AA Large
1.9
Fail
1.1
Fail
—
White BG
4.2AA Large
3.3AA Large
2.0Fail
1.1Fail
1.0Fail
Black BG
5.0AA
6.5AA
10.4AAA
18.9AAA
20.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A47
B2B154
D4D367
F8F8C0
F9F9F2

Deuteranopia

A4B047
BCC854
D9E06B
F9F9C4
F9F8F3

Tritanopia

D64646
F25454
F67679
FACED1
F7F5F5

Achromatopsia

737373
868686
B3B3B3
EFEFEF
F9F9F9

Shades & Tints Shades & Tints

#DE4448

Dark
Light

#FA5454

Dark
Light

#FAA254

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de4448;
  --color-2: #fa5454;
  --color-3: #faa254;
  --color-4: #faf6af;
  --color-5: #f7fcef;
}

SCSS

$color-1: #de4448;
$color-2: #fa5454;
$color-3: #faa254;
$color-4: #faf6af;
$color-5: #f7fcef;

TAILWIND

colors: {
  'brand-1': '#de4448',
  'brand-2': '#fa5454',
  'brand-3': '#faa254',
  'brand-4': '#faf6af',
  'brand-5': '#f7fcef',
}

RGB Array

[222, 68, 72], [250, 84, 84], [250, 162, 84], [250, 246, 175], [247, 252, 239]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #DE4448, #FA5454, #FAA254, #FAF6AF, #F7FCEF is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. 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: #de4448; --color-2: #fa5454; --color-3: #faa254; --color-4: #faf6af; --color-5: #f7fcef. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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