← Back to Editor

#1D1D42 · #B33668 · #F2305E · #FFB854 · #549164

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

#1D1D42

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#1D1D42
RGB
rgb(29, 29, 66)
HSL
hsl(240, 39%, 19%)
HSB
hsb(240, 56%, 26%)
CMYK
cmyk(56%, 56%, 0%, 74%)
Oklch
oklch(25.3% 0.068 280.4)

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

#B33668

Dark Violet · MediumVioletRed · Camellia

HEX
#B33668
RGB
rgb(179, 54, 104)
HSL
hsl(336, 54%, 46%)
HSB
hsb(336, 70%, 70%)
CMYK
cmyk(0%, 70%, 42%, 30%)
Oklch
oklch(53.1% 0.166 0.1)

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

#F2305E

Vermilion · Crimson · Passion Red

HEX
#F2305E
RGB
rgb(242, 48, 94)
HSL
hsl(346, 88%, 57%)
HSB
hsb(346, 80%, 95%)
CMYK
cmyk(0%, 80%, 61%, 5%)
Oklch
oklch(63.1% 0.226 14.2)

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

#FFB854

Ginger · SandyBrown · Warm Sun

HEX
#FFB854
RGB
rgb(255, 184, 84)
HSL
hsl(35, 100%, 66%)
HSB
hsb(35, 67%, 100%)
CMYK
cmyk(0%, 28%, 67%, 0%)
Oklch
oklch(83.1% 0.141 72.8)

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

#549164

Celadon · SeaGreen · Olive Green

HEX
#549164
RGB
rgb(84, 145, 100)
HSL
hsl(136, 27%, 45%)
HSB
hsb(136, 42%, 57%)
CMYK
cmyk(42%, 0%, 31%, 43%)
Oklch
oklch(60.3% 0.094 151.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1D1D42
43431E

Analogous

1E3043
1D1D42
301E43

Triadic

1D1D42
431E1E
1E431E

Split-Comp.

1D1D42
43301E
30431E

Tetradic

1D1D42
431E30
43431E
1E4330

Contrast Matrix WCAG 2.1 Contrast

1D1D42
B33668
F2305E
FFB854
549164
—
2.8
Fail
4.1
AA Large
9.4
AAA
4.3
AA Large
2.8
Fail
—
1.5
Fail
3.4
AA Large
1.5
Fail
4.1
AA Large
1.5
Fail
—
2.3
Fail
1.0
Fail
9.4
AAA
3.4
AA Large
2.3
Fail
—
2.2
Fail
4.3
AA Large
1.5
Fail
1.0
Fail
2.2
Fail
—
White BG
16.1AAA
5.8AA
3.9AA Large
1.7Fail
3.7AA Large
Black BG
1.3Fail
3.6AA Large
5.4AA
12.2AAA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1D1D39
7D7C5C
9E9C53
E0E06C
6E6F6F

Deuteranopia

1D1D37
848E59
A9B850
E4EA72
6B6672

Tritanopia

1D3230
AD5250
E84A48
FB7F84
577779

Achromatopsia

212121
616161
6F6F6F
C2C2C2
7A7A7A

Shades & Tints Shades & Tints

#1D1D42

Dark
Light

#B33668

Dark
Light

#F2305E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1d1d42;
  --color-2: #b33668;
  --color-3: #f2305e;
  --color-4: #ffb854;
  --color-5: #549164;
}

SCSS

$color-1: #1d1d42;
$color-2: #b33668;
$color-3: #f2305e;
$color-4: #ffb854;
$color-5: #549164;

TAILWIND

colors: {
  'brand-1': '#1d1d42',
  'brand-2': '#b33668',
  'brand-3': '#f2305e',
  'brand-4': '#ffb854',
  'brand-5': '#549164',
}

RGB Array

[29, 29, 66], [179, 54, 104], [242, 48, 94], [255, 184, 84], [84, 145, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1D1D42, #B33668, #F2305E, #FFB854, #549164 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: #1d1d42; --color-2: #b33668; --color-3: #f2305e; --color-4: #ffb854; --color-5: #549164. 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