← Back to Editor

#20182D · #C8E2F9 · #BCCBEA · #1F0409 · #290718

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

#20182D

Deep Indigo · Black · Dark Purple

HEX
#20182D
RGB
rgb(32, 24, 45)
HSL
hsl(263, 30%, 14%)
HSB
hsb(263, 47%, 18%)
CMYK
cmyk(29%, 47%, 0%, 82%)
Oklch
oklch(23.0% 0.041 300.8)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#C8E2F9

Sky Blue · Lavender · Sky Blue

HEX
#C8E2F9
RGB
rgb(200, 226, 249)
HSL
hsl(208, 80%, 88%)
HSB
hsb(208, 20%, 98%)
CMYK
cmyk(20%, 9%, 0%, 2%)
Oklch
oklch(90.1% 0.042 245.0)

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

#BCCBEA

Azure · LightSteelBlue · Sky Blue

HEX
#BCCBEA
RGB
rgb(188, 203, 234)
HSL
hsl(220, 52%, 83%)
HSB
hsb(220, 20%, 92%)
CMYK
cmyk(20%, 13%, 0%, 8%)
Oklch
oklch(84.1% 0.046 264.9)

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

#1F0409

Vermilion · Black · Deep Berry

HEX
#1F0409
RGB
rgb(31, 4, 9)
HSL
hsl(349, 77%, 7%)
HSB
hsb(349, 87%, 12%)
CMYK
cmyk(0%, 87%, 71%, 88%)
Oklch
oklch(16.5% 0.050 10.8)

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

#290718

Dark Violet · Black · Raspberry

HEX
#290718
RGB
rgb(41, 7, 24)
HSL
hsl(330, 71%, 9%)
HSB
hsb(330, 83%, 16%)
CMYK
cmyk(0%, 83%, 41%, 84%)
Oklch
oklch(19.8% 0.061 353.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20182D
262E19

Analogous

191B2E
20182D
2C192E

Triadic

20182D
2E2119
192E21

Split-Comp.

20182D
2E2C19
1B2E19

Tetradic

20182D
2E191B
262E19
192E2C

Contrast Matrix WCAG 2.1 Contrast

20182D
C8E2F9
BCCBEA
1F0409
290718
—
12.8
AAA
10.5
AAA
1.1
Fail
1.1
Fail
12.8
AAA
—
1.2
Fail
14.5
AAA
13.8
AAA
10.5
AAA
1.2
Fail
—
11.9
AAA
11.3
AAA
1.1
Fail
14.5
AAA
11.9
AAA
—
1.1
Fail
1.1
Fail
13.8
AAA
11.3
AAA
1.1
Fail
—
White BG
17.1AAA
1.3Fail
1.6Fail
19.5AAA
18.5AAA
Black BG
1.2Fail
15.7AAA
12.9AAA
1.1Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1D1C28
D3D3F3
C2C3E2
131308
1A1A14

Deuteranopia

1D1E27
D2D0F2
C2C1E1
151708
1C1F13

Tritanopia

202423
C9EFEE
BDDDDB
1E0707
271110

Achromatopsia

1D1D1D
DDDDDD
CACACA
0D0D0D
131313

Shades & Tints Shades & Tints

#20182D

Dark
Light

#C8E2F9

Dark
Light

#BCCBEA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20182d;
  --color-2: #c8e2f9;
  --color-3: #bccbea;
  --color-4: #1f0409;
  --color-5: #290718;
}

SCSS

$color-1: #20182d;
$color-2: #c8e2f9;
$color-3: #bccbea;
$color-4: #1f0409;
$color-5: #290718;

TAILWIND

colors: {
  'brand-1': '#20182d',
  'brand-2': '#c8e2f9',
  'brand-3': '#bccbea',
  'brand-4': '#1f0409',
  'brand-5': '#290718',
}

RGB Array

[32, 24, 45], [200, 226, 249], [188, 203, 234], [31, 4, 9], [41, 7, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #20182D, #C8E2F9, #BCCBEA, #1F0409, #290718 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: #20182d; --color-2: #c8e2f9; --color-3: #bccbea; --color-4: #1f0409; --color-5: #290718. 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