← Back to Editor

#CCEAD0 · #F9BA59 · #DD6C4E · #DA555A · #8C344C

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

#CCEAD0

Celadon · LightGray · Mint Green

HEX
#CCEAD0
RGB
rgb(204, 234, 208)
HSL
hsl(128, 42%, 86%)
HSB
hsb(128, 13%, 92%)
CMYK
cmyk(13%, 0%, 11%, 8%)
Oklch
oklch(90.8% 0.047 149.0)

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

#F9BA59

Ginger · SandyBrown · Warm Sun

HEX
#F9BA59
RGB
rgb(249, 186, 89)
HSL
hsl(36, 93%, 66%)
HSB
hsb(36, 64%, 98%)
CMYK
cmyk(0%, 25%, 64%, 2%)
Oklch
oklch(82.9% 0.134 75.7)

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

#DD6C4E

Vermilion · Tomato · Passion Red

HEX
#DD6C4E
RGB
rgb(221, 108, 78)
HSL
hsl(13, 68%, 59%)
HSB
hsb(13, 65%, 87%)
CMYK
cmyk(0%, 51%, 65%, 13%)
Oklch
oklch(65.9% 0.149 35.9)

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

#DA555A

Vermilion · Tomato · Passion Red

HEX
#DA555A
RGB
rgb(218, 85, 90)
HSL
hsl(358, 64%, 59%)
HSB
hsb(358, 61%, 85%)
CMYK
cmyk(0%, 61%, 59%, 15%)
Oklch
oklch(62.5% 0.167 21.1)

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

#8C344C

Dark Violet · Brown · Camellia

HEX
#8C344C
RGB
rgb(140, 52, 76)
HSL
hsl(344, 46%, 38%)
HSB
hsb(344, 63%, 55%)
CMYK
cmyk(0%, 63%, 46%, 45%)
Oklch
oklch(45.6% 0.121 6.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCEAD0
EACCE6

Analogous

D7EACC
CCEAD0
CCEADF

Triadic

CCEAD0
D0CCEA
EAD0CC

Split-Comp.

CCEAD0
DFCCEA
EACCD7

Tetradic

CCEAD0
CCD7EA
EACCE6
EADFCC

Contrast Matrix WCAG 2.1 Contrast

CCEAD0
F9BA59
DD6C4E
DA555A
8C344C
—
1.3
Fail
2.6
Fail
3.0
Fail
6.0
AA
1.3
Fail
—
1.9
Fail
2.2
Fail
4.5
AA Large
2.6
Fail
1.9
Fail
—
1.2
Fail
2.3
Fail
3.0
Fail
2.2
Fail
1.2
Fail
—
2.0
Fail
6.0
AA
4.5
AA Large
2.3
Fail
2.0
Fail
—
White BG
1.3Fail
1.7Fail
3.3AA Large
3.9AA Large
7.7AAA
Black BG
16.2AAA
12.2AAA
6.3AA
5.4AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9D6
DEDD70
ACAB55
A09F59
666546

Deuteranopia

D7D5D8
E1E676
B3BB57
A8B259
6B7245

Tritanopia

CDDBDC
F68387
D75B5C
D35858
884241

Achromatopsia

DEDEDE
C2C2C2
8A8A8A
7D7D7D
515151

Shades & Tints Shades & Tints

#CCEAD0

Dark
Light

#F9BA59

Dark
Light

#DD6C4E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccead0;
  --color-2: #f9ba59;
  --color-3: #dd6c4e;
  --color-4: #da555a;
  --color-5: #8c344c;
}

SCSS

$color-1: #ccead0;
$color-2: #f9ba59;
$color-3: #dd6c4e;
$color-4: #da555a;
$color-5: #8c344c;

TAILWIND

colors: {
  'brand-1': '#ccead0',
  'brand-2': '#f9ba59',
  'brand-3': '#dd6c4e',
  'brand-4': '#da555a',
  'brand-5': '#8c344c',
}

RGB Array

[204, 234, 208], [249, 186, 89], [221, 108, 78], [218, 85, 90], [140, 52, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #CCEAD0, #F9BA59, #DD6C4E, #DA555A, #8C344C 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: #ccead0; --color-2: #f9ba59; --color-3: #dd6c4e; --color-4: #da555a; --color-5: #8c344c. 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