← Back to Editor

#CDDCF9 · #FF922C · #F0553F · #C70087 · #1D2731

A 5-color palette 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

#CDDCF9

Azure · Lavender · Sky Blue

HEX
#CDDCF9
RGB
rgb(205, 220, 249)
HSL
hsl(220, 79%, 89%)
HSB
hsb(220, 18%, 98%)
CMYK
cmyk(18%, 12%, 0%, 2%)
Oklch
oklch(89.2% 0.043 263.7)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#FF922C

Tangerine · Coral · Warm Sun

HEX
#FF922C
RGB
rgb(255, 146, 44)
HSL
hsl(29, 100%, 59%)
HSB
hsb(29, 83%, 100%)
CMYK
cmyk(0%, 43%, 83%, 0%)
Oklch
oklch(76.2% 0.168 57.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F0553F

Vermilion · Tomato · Passion Red

HEX
#F0553F
RGB
rgb(240, 85, 63)
HSL
hsl(7, 86%, 59%)
HSB
hsb(7, 74%, 94%)
CMYK
cmyk(0%, 65%, 74%, 6%)
Oklch
oklch(65.5% 0.195 30.9)

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

#C70087

Rose Purple · MediumVioletRed · Eggplant

HEX
#C70087
RGB
rgb(199, 0, 135)
HSL
hsl(319, 100%, 39%)
HSB
hsb(319, 100%, 78%)
CMYK
cmyk(0%, 100%, 32%, 22%)
Oklch
oklch(54.9% 0.230 348.5)

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

#1D2731

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#1D2731
RGB
rgb(29, 39, 49)
HSL
hsl(210, 26%, 15%)
HSB
hsb(210, 41%, 19%)
CMYK
cmyk(41%, 20%, 0%, 81%)
Oklch
oklch(26.8% 0.023 248.7)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDDCF9
F9EACD

Analogous

CDF2F9
CDDCF9
D4CDF9

Triadic

CDDCF9
F9CDDC
DCF9CD

Split-Comp.

CDDCF9
F9D4CD
F2F9CD

Tetradic

CDDCF9
F9CDF2
F9EACD
CDF9D4

Contrast Matrix WCAG 2.1 Contrast

CDDCF9
FF922C
F0553F
C70087
1D2731
—
1.6
Fail
2.5
Fail
4.0
AA Large
11.0
AAA
1.6
Fail
—
1.5
Fail
2.5
Fail
6.8
AA
2.5
Fail
1.5
Fail
—
1.6
Fail
4.4
AA Large
4.0
AA Large
2.5
Fail
1.6
Fail
—
2.7
Fail
11.0
AAA
6.8
AA
4.4
AA Large
2.7
Fail
—
White BG
1.4Fail
2.2Fail
3.5AA Large
5.6AA
15.1AAA
Black BG
15.2AAA
9.4AAA
6.1AA
3.8AA Large
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D4F2
D0CF45
ADAB44
716F66
21212F

Deuteranopia

D3D2F0
D6DE4B
B6C246
7C8B5F
21202E

Tritanopia

CEECEB
FA585C
E84949
BD4D47
1D2D2C

Achromatopsia

DBDBDB
A7A7A7
818181
4B4B4B
252525

Shades & Tints Shades & Tints

#CDDCF9

Dark
Light

#FF922C

Dark
Light

#F0553F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cddcf9;
  --color-2: #ff922c;
  --color-3: #f0553f;
  --color-4: #c70087;
  --color-5: #1d2731;
}

SCSS

$color-1: #cddcf9;
$color-2: #ff922c;
$color-3: #f0553f;
$color-4: #c70087;
$color-5: #1d2731;

TAILWIND

colors: {
  'brand-1': '#cddcf9',
  'brand-2': '#ff922c',
  'brand-3': '#f0553f',
  'brand-4': '#c70087',
  'brand-5': '#1d2731',
}

RGB Array

[205, 220, 249], [255, 146, 44], [240, 85, 63], [199, 0, 135], [29, 39, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDDCF9, #FF922C, #F0553F, #C70087, #1D2731 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: #cddcf9; --color-2: #ff922c; --color-3: #f0553f; --color-4: #c70087; --color-5: #1d2731. 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 general-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