← Back to Editor

#FFDD97 · #D2006F · #FFBA58 · #77004C · #570039

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

#FFDD97

Goose Yellow · Khaki · Lemon Cream

HEX
#FFDD97
RGB
rgb(255, 221, 151)
HSL
hsl(40, 100%, 80%)
HSB
hsb(40, 41%, 100%)
CMYK
cmyk(0%, 13%, 41%, 0%)
Oklch
oklch(91.0% 0.096 84.7)

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

#D2006F

Rose Purple · MediumVioletRed · Camellia

HEX
#D2006F
RGB
rgb(210, 0, 111)
HSL
hsl(328, 100%, 41%)
HSB
hsb(328, 100%, 82%)
CMYK
cmyk(0%, 100%, 47%, 18%)
Oklch
oklch(56.0% 0.227 359.9)

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

#FFBA58

Ginger · SandyBrown · Warm Sun

HEX
#FFBA58
RGB
rgb(255, 186, 88)
HSL
hsl(35, 100%, 67%)
HSB
hsb(35, 65%, 100%)
CMYK
cmyk(0%, 27%, 65%, 0%)
Oklch
oklch(83.5% 0.138 73.3)

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

#77004C

Rose Purple · Purple · Raspberry

HEX
#77004C
RGB
rgb(119, 0, 76)
HSL
hsl(322, 100%, 23%)
HSB
hsb(322, 100%, 47%)
CMYK
cmyk(0%, 100%, 36%, 53%)
Oklch
oklch(37.5% 0.156 350.3)

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

#570039

Rose Purple · Maroon · Raspberry

HEX
#570039
RGB
rgb(87, 0, 57)
HSL
hsl(321, 100%, 17%)
HSB
hsb(321, 100%, 34%)
CMYK
cmyk(0%, 100%, 34%, 66%)
Oklch
oklch(30.2% 0.127 348.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFDD97
99BBFF

Analogous

FFAA99
FFDD97
EEFF99

Triadic

FFDD97
99FFDD
DD99FF

Split-Comp.

FFDD97
99EEFF
AA99FF

Tetradic

FFDD97
99FFAA
99BBFF
FF99EE

Contrast Matrix WCAG 2.1 Contrast

FFDD97
D2006F
FFBA58
77004C
570039
—
4.0
AA Large
1.3
Fail
8.5
AAA
11.0
AAA
4.0
AA Large
—
3.1
AA Large
2.1
Fail
2.7
Fail
1.3
Fail
3.1
AA Large
—
6.6
AA
8.5
AAA
8.5
AAA
2.1
Fail
6.6
AA
—
1.3
Fail
11.0
AAA
2.7
Fail
8.5
AAA
1.3
Fail
—
White BG
1.3Fail
5.3AA
1.7Fail
11.1AAA
14.3AAA
Black BG
16.0AAA
4.0AA Large
12.4AAA
1.9Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0A8
777554
E1E170
43423A
31312B

Deuteranopia

F2F5AC
83934E
E5EA75
4A5335
363D28

Tritanopia

FDB5B8
C83F3A
FC8287
712B28
53201E

Achromatopsia

DFDFDF
4B4B4B
C3C3C3
2C2C2C
212121

Shades & Tints Shades & Tints

#FFDD97

Dark
Light

#D2006F

Dark
Light

#FFBA58

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffdd97;
  --color-2: #d2006f;
  --color-3: #ffba58;
  --color-4: #77004c;
  --color-5: #570039;
}

SCSS

$color-1: #ffdd97;
$color-2: #d2006f;
$color-3: #ffba58;
$color-4: #77004c;
$color-5: #570039;

TAILWIND

colors: {
  'brand-1': '#ffdd97',
  'brand-2': '#d2006f',
  'brand-3': '#ffba58',
  'brand-4': '#77004c',
  'brand-5': '#570039',
}

RGB Array

[255, 221, 151], [210, 0, 111], [255, 186, 88], [119, 0, 76], [87, 0, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFDD97, #D2006F, #FFBA58, #77004C, #570039 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: #ffdd97; --color-2: #d2006f; --color-3: #ffba58; --color-4: #77004c; --color-5: #570039. 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