← Back to Editor

#656364 · #090F2C · #EC0797 · #FC6454 · #F5C430

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

#656364

Ink Gray · DimGray · Charcoal

HEX
#656364
RGB
rgb(101, 99, 100)
HSL
hsl(330, 1%, 39%)
HSB
hsb(330, 2%, 40%)
CMYK
cmyk(0%, 2%, 1%, 60%)
Oklch
oklch(50.2% 0.003 345.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#090F2C

Indigo · Black · Deep Sea Blue

HEX
#090F2C
RGB
rgb(9, 15, 44)
HSL
hsl(230, 66%, 10%)
HSB
hsb(230, 80%, 17%)
CMYK
cmyk(80%, 66%, 0%, 83%)
Oklch
oklch(18.3% 0.059 270.7)

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

#EC0797

Rose Purple · DeepPink · Camellia

HEX
#EC0797
RGB
rgb(236, 7, 151)
HSL
hsl(322, 94%, 48%)
HSB
hsb(322, 97%, 93%)
CMYK
cmyk(0%, 97%, 36%, 7%)
Oklch
oklch(62.1% 0.255 351.7)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#FC6454

Peach Pink · Tomato · Coral Red

HEX
#FC6454
RGB
rgb(252, 100, 84)
HSL
hsl(6, 97%, 66%)
HSB
hsb(6, 67%, 99%)
CMYK
cmyk(0%, 60%, 67%, 1%)
Oklch
oklch(69.5% 0.189 28.8)

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

#F5C430

Ginger · GoldenRod · Sunflower

HEX
#F5C430
RGB
rgb(245, 196, 48)
HSL
hsl(45, 91%, 57%)
HSB
hsb(45, 80%, 96%)
CMYK
cmyk(0%, 20%, 80%, 4%)
Oklch
oklch(84.1% 0.160 88.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

656364
626463

Analogous

646264
656364
646262

Triadic

656364
636462
626364

Split-Comp.

656364
626462
626464

Tetradic

656364
646462
626463
626264

Contrast Matrix WCAG 2.1 Contrast

656364
090F2C
EC0797
FC6454
F5C430
—
3.2
AA Large
1.4
Fail
2.0
Fail
3.6
AA Large
3.2
AA Large
—
4.5
AA
6.4
AA
11.5
AAA
1.4
Fail
4.5
AA
—
1.4
Fail
2.5
Fail
2.0
Fail
6.4
AA
1.4
Fail
—
1.8
Fail
3.6
AA Large
11.5
AAA
2.5
Fail
1.8
Fail
—
White BG
6.0AA
18.8AAA
4.2AA Large
3.0Fail
1.6Fail
Black BG
3.5AA Large
1.1Fail
5.0AA
7.1AAA
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

646464
0C0C25
898774
BAB958
E0DF54

Deuteranopia

646464
0B0B23
96A76C
C3CE59
E3E65C

Tritanopia

656464
091F1E
E15953
F45B5C
F37076

Achromatopsia

646464
111111
5C5C5C
909090
C2C2C2

Shades & Tints Shades & Tints

#656364

Dark
Light

#090F2C

Dark
Light

#EC0797

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #656364;
  --color-2: #090f2c;
  --color-3: #ec0797;
  --color-4: #fc6454;
  --color-5: #f5c430;
}

SCSS

$color-1: #656364;
$color-2: #090f2c;
$color-3: #ec0797;
$color-4: #fc6454;
$color-5: #f5c430;

TAILWIND

colors: {
  'brand-1': '#656364',
  'brand-2': '#090f2c',
  'brand-3': '#ec0797',
  'brand-4': '#fc6454',
  'brand-5': '#f5c430',
}

RGB Array

[101, 99, 100], [9, 15, 44], [236, 7, 151], [252, 100, 84], [245, 196, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #656364, #090F2C, #EC0797, #FC6454, #F5C430 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: #656364; --color-2: #090f2c; --color-3: #ec0797; --color-4: #fc6454; --color-5: #f5c430. 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