← Back to Editor

#4F5D4F · #040401 · #6C760C · #E12145 · #F41E75

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

#4F5D4F

Celadon · DarkSlateGray · Charcoal

HEX
#4F5D4F
RGB
rgb(79, 93, 79)
HSL
hsl(120, 8%, 34%)
HSB
hsb(120, 15%, 36%)
CMYK
cmyk(15%, 0%, 15%, 64%)
Oklch
oklch(46.2% 0.028 145.1)

Traditional「Celadon」· Paint「Charcoal」· Creative Midnight Shadow

#040401

Autumn Sage · Black · Amber Gold

HEX
#040401
RGB
rgb(4, 4, 1)
HSL
hsl(60, 60%, 1%)
HSB
hsb(60, 75%, 2%)
CMYK
cmyk(0%, 0%, 75%, 98%)
Oklch
oklch(10.4% 0.015 108.7)

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

#6C760C

Autumn Sage · Olive · Amber Gold

HEX
#6C760C
RGB
rgb(108, 118, 12)
HSL
hsl(66, 82%, 25%)
HSB
hsb(66, 90%, 46%)
CMYK
cmyk(8%, 0%, 90%, 54%)
Oklch
oklch(53.9% 0.119 115.6)

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

#E12145

Vermilion · Crimson · Passion Red

HEX
#E12145
RGB
rgb(225, 33, 69)
HSL
hsl(349, 76%, 51%)
HSB
hsb(349, 85%, 88%)
CMYK
cmyk(0%, 85%, 69%, 12%)
Oklch
oklch(58.7% 0.220 18.9)

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

#F41E75

Dark Violet · DeepPink · Rose Pink

HEX
#F41E75
RGB
rgb(244, 30, 117)
HSL
hsl(336, 91%, 54%)
HSB
hsb(336, 88%, 96%)
CMYK
cmyk(0%, 88%, 52%, 4%)
Oklch
oklch(63.0% 0.241 5.2)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F5D4F
5E505E

Analogous

575E50
4F5D4F
505E57

Triadic

4F5D4F
50505E
5E5050

Split-Comp.

4F5D4F
57505E
5E5057

Tetradic

4F5D4F
50575E
5E505E
5E5750

Contrast Matrix WCAG 2.1 Contrast

4F5D4F
040401
6C760C
E12145
F41E75
—
2.9
Fail
1.4
Fail
1.5
Fail
1.8
Fail
2.9
Fail
—
4.1
AA Large
4.4
AA Large
5.2
AA
1.4
Fail
4.1
AA Large
—
1.1
Fail
1.2
Fail
1.5
Fail
4.4
AA Large
1.1
Fail
—
1.2
Fail
1.8
Fail
5.2
AA
1.2
Fail
1.2
Fail
—
White BG
7.0AA
20.5AAA
5.0AA
4.7AA
4.0AA Large
Black BG
3.0AA Large
1.0Fail
4.2AA Large
4.5AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

555552
040402
707026
8E8C3C
979560

Deuteranopia

545353
040402
706F2C
99A73A
A4B45B

Tritanopia

505556
040202
6D3A3E
D73534
E94F4C

Achromatopsia

575757
040404
676767
5F5F5F
686868

Shades & Tints Shades & Tints

#4F5D4F

Dark
Light

#040401

Dark
Light

#6C760C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f5d4f;
  --color-2: #040401;
  --color-3: #6c760c;
  --color-4: #e12145;
  --color-5: #f41e75;
}

SCSS

$color-1: #4f5d4f;
$color-2: #040401;
$color-3: #6c760c;
$color-4: #e12145;
$color-5: #f41e75;

TAILWIND

colors: {
  'brand-1': '#4f5d4f',
  'brand-2': '#040401',
  'brand-3': '#6c760c',
  'brand-4': '#e12145',
  'brand-5': '#f41e75',
}

RGB Array

[79, 93, 79], [4, 4, 1], [108, 118, 12], [225, 33, 69], [244, 30, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F5D4F, #040401, #6C760C, #E12145, #F41E75 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #4f5d4f; --color-2: #040401; --color-3: #6c760c; --color-4: #e12145; --color-5: #f41e75. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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