← Back to Editor

#22384F · #F49E6B · #F66D5B · #D5424A · #932F37

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

#22384F

Indigo · DarkSlateGray · Prussian Blue

HEX
#22384F
RGB
rgb(34, 56, 79)
HSL
hsl(211, 40%, 22%)
HSB
hsb(211, 57%, 31%)
CMYK
cmyk(57%, 29%, 0%, 69%)
Oklch
oklch(33.4% 0.050 250.5)

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

#F49E6B

Apricot · SandyBrown · Warm Sun

HEX
#F49E6B
RGB
rgb(244, 158, 107)
HSL
hsl(22, 86%, 69%)
HSB
hsb(22, 56%, 96%)
CMYK
cmyk(0%, 35%, 56%, 4%)
Oklch
oklch(77.5% 0.123 50.8)

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

#F66D5B

Peach Pink · Coral · Coral Red

HEX
#F66D5B
RGB
rgb(246, 109, 91)
HSL
hsl(7, 90%, 66%)
HSB
hsb(7, 63%, 96%)
CMYK
cmyk(0%, 56%, 63%, 4%)
Oklch
oklch(69.8% 0.172 29.6)

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

#D5424A

Vermilion · Crimson · Passion Red

HEX
#D5424A
RGB
rgb(213, 66, 74)
HSL
hsl(357, 64%, 55%)
HSB
hsb(357, 69%, 84%)
CMYK
cmyk(0%, 69%, 65%, 16%)
Oklch
oklch(59.3% 0.183 21.8)

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

#932F37

Crimson · Brown · Wine Red

HEX
#932F37
RGB
rgb(147, 47, 55)
HSL
hsl(355, 52%, 38%)
HSB
hsb(355, 68%, 58%)
CMYK
cmyk(0%, 68%, 63%, 42%)
Oklch
oklch(45.6% 0.134 19.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

22384F
4F3922

Analogous

224E4F
22384F
22224F

Triadic

22384F
4F2237
374F22

Split-Comp.

22384F
4F2222
4E4F22

Tetradic

22384F
4F224E
4F3922
224F22

Contrast Matrix WCAG 2.1 Contrast

22384F
F49E6B
F66D5B
D5424A
932F37
—
5.7
AA
4.2
AA Large
2.7
Fail
1.5
Fail
5.7
AA
—
1.4
Fail
2.1
Fail
3.7
AA Large
4.2
AA Large
1.4
Fail
—
1.5
Fail
2.7
Fail
2.7
Fail
2.1
Fail
1.5
Fail
—
1.7
Fail
1.5
Fail
3.7
AA Large
2.7
Fail
1.7
Fail
—
White BG
12.0AAA
2.1Fail
2.9Fail
4.5AA Large
7.8AAA
Black BG
1.7Fail
9.9AAA
7.3AAA
4.7AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C49
CFCE77
BBB95F
959448
686735

Deuteranopia

2A2948
D4DA7A
C3CD60
9EA948
6E7535

Tritanopia

234544
F08183
EF6364
CE4746
8E3433

Achromatopsia

343434
B2B2B2
949494
6F6F6F
4E4E4E

Shades & Tints Shades & Tints

#22384F

Dark
Light

#F49E6B

Dark
Light

#F66D5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #22384f;
  --color-2: #f49e6b;
  --color-3: #f66d5b;
  --color-4: #d5424a;
  --color-5: #932f37;
}

SCSS

$color-1: #22384f;
$color-2: #f49e6b;
$color-3: #f66d5b;
$color-4: #d5424a;
$color-5: #932f37;

TAILWIND

colors: {
  'brand-1': '#22384f',
  'brand-2': '#f49e6b',
  'brand-3': '#f66d5b',
  'brand-4': '#d5424a',
  'brand-5': '#932f37',
}

RGB Array

[34, 56, 79], [244, 158, 107], [246, 109, 91], [213, 66, 74], [147, 47, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #22384F, #F49E6B, #F66D5B, #D5424A, #932F37 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: #22384f; --color-2: #f49e6b; --color-3: #f66d5b; --color-4: #d5424a; --color-5: #932f37. 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