← Back to Editor

#F7EDA8 · #ECA181 · #FE5085 · #CB4894 · #404C7C

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F7EDA8

Fresh Green · Wheat · Lemon Cream

HEX
#F7EDA8
RGB
rgb(247, 237, 168)
HSL
hsl(52, 83%, 81%)
HSB
hsb(52, 32%, 97%)
CMYK
cmyk(0%, 4%, 32%, 3%)
Oklch
oklch(93.8% 0.088 100.9)

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

#ECA181

Apricot · DarkSalmon · Warm Sun

HEX
#ECA181
RGB
rgb(236, 161, 129)
HSL
hsl(18, 74%, 72%)
HSB
hsb(18, 45%, 93%)
CMYK
cmyk(0%, 32%, 45%, 7%)
Oklch
oklch(77.5% 0.100 43.9)

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

#FE5085

Rouge · LightCoral · Rose Pink

HEX
#FE5085
RGB
rgb(254, 80, 133)
HSL
hsl(342, 99%, 65%)
HSB
hsb(342, 69%, 100%)
CMYK
cmyk(0%, 69%, 48%, 0%)
Oklch
oklch(68.5% 0.212 6.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#CB4894

Rose Purple · MediumVioletRed · Rose Pink

HEX
#CB4894
RGB
rgb(203, 72, 148)
HSL
hsl(325, 56%, 54%)
HSB
hsb(325, 65%, 80%)
CMYK
cmyk(0%, 65%, 27%, 20%)
Oklch
oklch(60.4% 0.183 348.1)

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

#404C7C

Indigo · DarkSlateBlue · Prussian Blue

HEX
#404C7C
RGB
rgb(64, 76, 124)
HSL
hsl(228, 32%, 37%)
HSB
hsb(228, 48%, 49%)
CMYK
cmyk(48%, 39%, 0%, 51%)
Oklch
oklch(42.9% 0.081 272.0)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7EDA8
A6B1F7

Analogous

F7C4A6
F7EDA8
D9F7A6

Triadic

F7EDA8
A6F7EC
ECA6F7

Split-Comp.

F7EDA8
A6D9F7
C4A6F7

Tetradic

F7EDA8
A6F7C4
A6B1F7
F7A6D9

Contrast Matrix WCAG 2.1 Contrast

F7EDA8
ECA181
FE5085
CB4894
404C7C
—
1.8
Fail
2.6
Fail
3.6
AA Large
6.9
AA
1.8
Fail
—
1.5
Fail
2.0
Fail
3.9
AA Large
2.6
Fail
1.5
Fail
—
1.4
Fail
2.6
Fail
3.6
AA Large
2.0
Fail
1.4
Fail
—
1.9
Fail
6.9
AA
3.9
AA Large
2.6
Fail
1.9
Fail
—
White BG
1.2Fail
2.1Fail
3.1AA Large
4.3AA Large
8.3AAA
Black BG
17.6AAA
10.0AAA
6.7AA
4.9AA
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3B9
CCCB89
B3B178
929182
454570

Deuteranopia

F3F4BD
D0D68B
BDCA75
9AA47D
45446E

Tritanopia

F6C6C9
E88F90
F56E6C
C47370
416765

Achromatopsia

E8E8E8
B4B4B4
8A8A8A
787878
4E4E4E

Shades & Tints Shades & Tints

#F7EDA8

Dark
Light

#ECA181

Dark
Light

#FE5085

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7eda8;
  --color-2: #eca181;
  --color-3: #fe5085;
  --color-4: #cb4894;
  --color-5: #404c7c;
}

SCSS

$color-1: #f7eda8;
$color-2: #eca181;
$color-3: #fe5085;
$color-4: #cb4894;
$color-5: #404c7c;

TAILWIND

colors: {
  'brand-1': '#f7eda8',
  'brand-2': '#eca181',
  'brand-3': '#fe5085',
  'brand-4': '#cb4894',
  'brand-5': '#404c7c',
}

RGB Array

[247, 237, 168], [236, 161, 129], [254, 80, 133], [203, 72, 148], [64, 76, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F7EDA8, #ECA181, #FE5085, #CB4894, #404C7C 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: #f7eda8; --color-2: #eca181; --color-3: #fe5085; --color-4: #cb4894; --color-5: #404c7c. 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 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