← Back to Editor

#F9F9F9 · #C1C8DA · #EC0533 · #900017 · #280000

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

#F9F9F9

Moonlight White · Snow · Cloud White

HEX
#F9F9F9
RGB
rgb(249, 249, 249)
HSL
hsl(0, 0%, 98%)
HSB
hsb(0, 0%, 98%)
CMYK
cmyk(0%, 0%, 0%, 2%)
Oklch
oklch(98.2% 0.000 89.9)

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

#C1C8DA

Azure · LightSteelBlue · Sky Blue

HEX
#C1C8DA
RGB
rgb(193, 200, 218)
HSL
hsl(223, 25%, 81%)
HSB
hsb(223, 11%, 85%)
CMYK
cmyk(11%, 8%, 0%, 15%)
Oklch
oklch(83.3% 0.026 268.8)

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

#EC0533

Vermilion · Crimson · Passion Red

HEX
#EC0533
RGB
rgb(236, 5, 51)
HSL
hsl(348, 96%, 47%)
HSB
hsb(348, 98%, 93%)
CMYK
cmyk(0%, 98%, 78%, 7%)
Oklch
oklch(59.6% 0.239 22.8)

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

#900017

Vermilion · DarkRed · Wine Red

HEX
#900017
RGB
rgb(144, 0, 23)
HSL
hsl(350, 100%, 28%)
HSB
hsb(350, 100%, 56%)
CMYK
cmyk(0%, 100%, 84%, 44%)
Oklch
oklch(41.2% 0.167 24.0)

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

#280000

Vermilion · Black · Deep Berry

HEX
#280000
RGB
rgb(40, 0, 0)
HSL
hsl(0, 100%, 8%)
HSB
hsb(0, 100%, 16%)
CMYK
cmyk(0%, 100%, 100%, 84%)
Oklch
oklch(17.4% 0.071 29.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9F9F9
FAFAFA

Analogous

FAFAFA
F9F9F9
FAFAFA

Triadic

F9F9F9
FAFAFA
FAFAFA

Split-Comp.

F9F9F9
FAFAFA
FAFAFA

Tetradic

F9F9F9
FAFAFA
FAFAFA
FAFAFA

Contrast Matrix WCAG 2.1 Contrast

F9F9F9
C1C8DA
EC0533
900017
280000
—
1.6
Fail
4.3
AA Large
9.1
AAA
18.3
AAA
1.6
Fail
—
2.7
Fail
5.7
AA
11.5
AAA
4.3
AA Large
2.7
Fail
—
2.1
Fail
4.3
AA Large
9.1
AAA
5.7
AA
2.1
Fail
—
2.0
Fail
18.3
AAA
11.5
AAA
4.3
AA Large
2.0
Fail
—
White BG
1.1Fail
1.7Fail
4.5AA
9.6AAA
19.3AAA
Black BG
19.9AAA
12.5AAA
4.6AA
2.2Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9F9
C4C4D6
888628
525011
171600

Deuteranopia

F9F9F9
C4C3D5
95A725
5A6510
191C00

Tritanopia

F9F9F9
C1D2D1
E01F1D
890D0C
260000

Achromatopsia

F9F9F9
C8C8C8
4F4F4F
2E2E2E
0C0C0C

Shades & Tints Shades & Tints

#F9F9F9

Dark
Light

#C1C8DA

Dark
Light

#EC0533

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9f9f9;
  --color-2: #c1c8da;
  --color-3: #ec0533;
  --color-4: #900017;
  --color-5: #280000;
}

SCSS

$color-1: #f9f9f9;
$color-2: #c1c8da;
$color-3: #ec0533;
$color-4: #900017;
$color-5: #280000;

TAILWIND

colors: {
  'brand-1': '#f9f9f9',
  'brand-2': '#c1c8da',
  'brand-3': '#ec0533',
  'brand-4': '#900017',
  'brand-5': '#280000',
}

RGB Array

[249, 249, 249], [193, 200, 218], [236, 5, 51], [144, 0, 23], [40, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9F9F9, #C1C8DA, #EC0533, #900017, #280000 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: #f9f9f9; --color-2: #c1c8da; --color-3: #ec0533; --color-4: #900017; --color-5: #280000. 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