← Back to Editor

#5C223B · #F77C00 · #FFFFFF · #9CB509 · #E4E800

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#5C223B

Dark Violet · DarkSlateGray · Raspberry

HEX
#5C223B
RGB
rgb(92, 34, 59)
HSL
hsl(334, 46%, 25%)
HSB
hsb(334, 63%, 36%)
CMYK
cmyk(0%, 63%, 36%, 64%)
Oklch
oklch(34.6% 0.090 355.9)

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

#F77C00

Ochre · Orange · Amber Brown

HEX
#F77C00
RGB
rgb(247, 124, 0)
HSL
hsl(30, 100%, 48%)
HSB
hsb(30, 100%, 97%)
CMYK
cmyk(0%, 50%, 100%, 3%)
Oklch
oklch(71.5% 0.181 53.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

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

#9CB509

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#9CB509
RGB
rgb(156, 181, 9)
HSL
hsl(69, 91%, 37%)
HSB
hsb(69, 95%, 71%)
CMYK
cmyk(14%, 0%, 95%, 29%)
Oklch
oklch(72.8% 0.170 119.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#E4E800

Autumn Sage · Gold · Honey Gold

HEX
#E4E800
RGB
rgb(228, 232, 0)
HSL
hsl(61, 100%, 45%)
HSB
hsb(61, 100%, 91%)
CMYK
cmyk(2%, 0%, 100%, 9%)
Oklch
oklch(89.8% 0.197 111.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C223B
225D44

Analogous

5D2259
5C223B
5D2622

Triadic

5C223B
3C5D22
223C5D

Split-Comp.

5C223B
225D26
22595D

Tetradic

5C223B
595D22
225D44
26225D

Contrast Matrix WCAG 2.1 Contrast

5C223B
F77C00
FFFFFF
9CB509
E4E800
—
4.5
AA Large
12.0
AAA
5.2
AA
9.1
AAA
4.5
AA Large
—
2.7
Fail
1.2
Fail
2.0
Fail
12.0
AAA
2.7
Fail
—
2.3
Fail
1.3
Fail
5.2
AA
1.2
Fail
2.3
Fail
—
1.8
Fail
9.1
AAA
2.0
Fail
1.3
Fail
1.8
Fail
—
White BG
12.0AAA
2.7Fail
1.0Fail
2.3Fail
1.3Fail
Black BG
1.7Fail
7.8AAA
21.0AAA
9.0AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434235
C2C11E
FFFFFF
A7A733
E6E638

Deuteranopia

464B34
C9D225
FFFFFF
A5A43D
E6E546

Tritanopia

59302F
F1363B
FFFFFF
9D535B
E4646E

Achromatopsia

363636
939393
FFFFFF
9A9A9A
CCCCCC

Shades & Tints Shades & Tints

#5C223B

Dark
Light

#F77C00

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c223b;
  --color-2: #f77c00;
  --color-3: #ffffff;
  --color-4: #9cb509;
  --color-5: #e4e800;
}

SCSS

$color-1: #5c223b;
$color-2: #f77c00;
$color-3: #ffffff;
$color-4: #9cb509;
$color-5: #e4e800;

TAILWIND

colors: {
  'brand-1': '#5c223b',
  'brand-2': '#f77c00',
  'brand-3': '#ffffff',
  'brand-4': '#9cb509',
  'brand-5': '#e4e800',
}

RGB Array

[92, 34, 59], [247, 124, 0], [255, 255, 255], [156, 181, 9], [228, 232, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C223B, #F77C00, #FFFFFF, #9CB509, #E4E800 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: #5c223b; --color-2: #f77c00; --color-3: #ffffff; --color-4: #9cb509; --color-5: #e4e800. 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