← Back to Editor

#20345B · #C4365B · #E66E6C · #E9B08C · #F1E4A8

space

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

#20345B

Indigo · DarkSlateGray · Prussian Blue

HEX
#20345B
RGB
rgb(32, 52, 91)
HSL
hsl(220, 48%, 24%)
HSB
hsb(220, 65%, 36%)
CMYK
cmyk(65%, 43%, 0%, 64%)
Oklch
oklch(33.0% 0.074 262.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#C4365B

Dark Violet · Crimson · Camellia

HEX
#C4365B
RGB
rgb(196, 54, 91)
HSL
hsl(344, 57%, 49%)
HSB
hsb(344, 72%, 77%)
CMYK
cmyk(0%, 72%, 54%, 23%)
Oklch
oklch(55.6% 0.179 10.0)

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

#E66E6C

Peach Pink · Salmon · Coral Red

HEX
#E66E6C
RGB
rgb(230, 110, 108)
HSL
hsl(1, 71%, 66%)
HSB
hsb(1, 53%, 90%)
CMYK
cmyk(0%, 52%, 53%, 10%)
Oklch
oklch(68.0% 0.150 22.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E9B08C

Apricot · BurlyWood · Warm Sun

HEX
#E9B08C
RGB
rgb(233, 176, 140)
HSL
hsl(23, 68%, 73%)
HSB
hsb(23, 40%, 91%)
CMYK
cmyk(0%, 24%, 40%, 9%)
Oklch
oklch(80.1% 0.083 53.5)

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

#F1E4A8

Goose Yellow · Wheat · Lemon Cream

HEX
#F1E4A8
RGB
rgb(241, 228, 168)
HSL
hsl(49, 72%, 80%)
HSB
hsb(49, 30%, 95%)
CMYK
cmyk(0%, 5%, 30%, 5%)
Oklch
oklch(91.5% 0.078 97.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20345B
5B4720

Analogous

20515B
20345B
2A205B

Triadic

20345B
5B2033
335B20

Split-Comp.

20345B
5B2A20
515B20

Tetradic

20345B
5B2051
5B4720
205B2A

Contrast Matrix WCAG 2.1 Contrast

20345B
C4365B
E66E6C
E9B08C
F1E4A8
—
2.4
Fail
4.0
AA Large
6.5
AA
9.6
AAA
2.4
Fail
—
1.7
Fail
2.7
Fail
4.1
AA Large
4.0
AA Large
1.7
Fail
—
1.6
Fail
2.4
Fail
6.5
AA
2.7
Fail
1.6
Fail
—
1.5
Fail
9.6
AAA
4.1
AA Large
2.4
Fail
1.5
Fail
—
White BG
12.3AAA
5.2AA
3.1AA Large
1.9Fail
1.3Fail
Black BG
1.7Fail
4.0AA Large
6.8AA
11.1AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

292952
878552
B2B16C
D0D095
EBEBB7

Deuteranopia

28264F
8F9950
B9C26D
D4D897
ECEDBA

Tritanopia

214A48
BD4B49
E06D6D
E69C9D
F0C2C5

Achromatopsia

323232
656565
929292
BDBDBD
E1E1E1

Shades & Tints Shades & Tints

#20345B

Dark
Light

#C4365B

Dark
Light

#E66E6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20345b;
  --color-2: #c4365b;
  --color-3: #e66e6c;
  --color-4: #e9b08c;
  --color-5: #f1e4a8;
}

SCSS

$color-1: #20345b;
$color-2: #c4365b;
$color-3: #e66e6c;
$color-4: #e9b08c;
$color-5: #f1e4a8;

TAILWIND

colors: {
  'brand-1': '#20345b',
  'brand-2': '#c4365b',
  'brand-3': '#e66e6c',
  'brand-4': '#e9b08c',
  'brand-5': '#f1e4a8',
}

RGB Array

[32, 52, 91], [196, 54, 91], [230, 110, 108], [233, 176, 140], [241, 228, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #20345B, #C4365B, #E66E6C, #E9B08C, #F1E4A8 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: #20345b; --color-2: #c4365b; --color-3: #e66e6c; --color-4: #e9b08c; --color-5: #f1e4a8. 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 space-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