← Back to Editor

#FFFFFF · #E6DF2C · #FF7C44 · #FF4785 · #C65875

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#E6DF2C

Autumn Sage · Gold · Sunflower

HEX
#E6DF2C
RGB
rgb(230, 223, 44)
HSL
hsl(58, 79%, 54%)
HSB
hsb(58, 81%, 90%)
CMYK
cmyk(0%, 3%, 81%, 10%)
Oklch
oklch(88.2% 0.180 107.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FF7C44

Apricot · Coral · Warm Sun

HEX
#FF7C44
RGB
rgb(255, 124, 68)
HSL
hsl(18, 100%, 63%)
HSB
hsb(18, 73%, 100%)
CMYK
cmyk(0%, 51%, 73%, 0%)
Oklch
oklch(72.9% 0.174 42.3)

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

#FF4785

Rouge · DeepPink · Rose Pink

HEX
#FF4785
RGB
rgb(255, 71, 133)
HSL
hsl(340, 100%, 64%)
HSB
hsb(340, 72%, 100%)
CMYK
cmyk(0%, 72%, 48%, 0%)
Oklch
oklch(67.9% 0.222 5.2)

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

#C65875

Dark Violet · LightCoral · Rose Pink

HEX
#C65875
RGB
rgb(198, 88, 117)
HSL
hsl(344, 49%, 56%)
HSB
hsb(344, 56%, 78%)
CMYK
cmyk(0%, 56%, 41%, 22%)
Oklch
oklch(60.6% 0.143 5.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFFF
FFFFFF

Analogous

FFFFFF
FFFFFF
FFFFFF

Triadic

FFFFFF
FFFFFF
FFFFFF

Split-Comp.

FFFFFF
FFFFFF
FFFFFF

Tetradic

FFFFFF
FFFFFF
FFFFFF
FFFFFF

Contrast Matrix WCAG 2.1 Contrast

FFFFFF
E6DF2C
FF7C44
FF4785
C65875
—
1.4
Fail
2.6
Fail
3.2
AA Large
4.2
AA Large
1.4
Fail
—
1.8
Fail
2.3
Fail
3.0
Fail
2.6
Fail
1.8
Fail
—
1.3
Fail
1.6
Fail
3.2
AA Large
2.3
Fail
1.3
Fail
—
1.3
Fail
4.2
AA Large
3.0
Fail
1.6
Fail
1.3
Fail
—
White BG
1.0Fail
1.4Fail
2.6Fail
3.2AA Large
4.2AA Large
Black BG
21.0AAA
15.0AAA
8.2AAA
6.5AA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFFF
E3E357
C6C552
AFAE76
96956E

Deuteranopia

FFFFFF
E3E462
CED855
BAC872
9DA56C

Tritanopia

FFFFFF
E67A81
F85C5F
F66A68
C16867

Achromatopsia

FFFFFF
CDCDCD
9D9D9D
858585
7C7C7C

Shades & Tints Shades & Tints

#FFFFFF

Dark
Light

#E6DF2C

Dark
Light

#FF7C44

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffff;
  --color-2: #e6df2c;
  --color-3: #ff7c44;
  --color-4: #ff4785;
  --color-5: #c65875;
}

SCSS

$color-1: #ffffff;
$color-2: #e6df2c;
$color-3: #ff7c44;
$color-4: #ff4785;
$color-5: #c65875;

TAILWIND

colors: {
  'brand-1': '#ffffff',
  'brand-2': '#e6df2c',
  'brand-3': '#ff7c44',
  'brand-4': '#ff4785',
  'brand-5': '#c65875',
}

RGB Array

[255, 255, 255], [230, 223, 44], [255, 124, 68], [255, 71, 133], [198, 88, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFFFFF, #E6DF2C, #FF7C44, #FF4785, #C65875 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #ffffff; --color-2: #e6df2c; --color-3: #ff7c44; --color-4: #ff4785; --color-5: #c65875. 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. 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