← Back to Editor

#302430 · #4B3E58 · #52755A · #FFFFFF · #E8175D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#302430

Rose Purple · DarkSlateGray · Dark Purple

HEX
#302430
RGB
rgb(48, 36, 48)
HSL
hsl(300, 14%, 16%)
HSB
hsb(300, 25%, 19%)
CMYK
cmyk(0%, 25%, 0%, 81%)
Oklch
oklch(27.9% 0.028 326.3)

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

#4B3E58

Dark Plum · DarkSlateGray · Eggplant

HEX
#4B3E58
RGB
rgb(75, 62, 88)
HSL
hsl(270, 17%, 29%)
HSB
hsb(270, 30%, 35%)
CMYK
cmyk(15%, 30%, 0%, 65%)
Oklch
oklch(38.8% 0.046 307.1)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#52755A

Celadon · DimGray · Forest Green

HEX
#52755A
RGB
rgb(82, 117, 90)
HSL
hsl(134, 18%, 39%)
HSB
hsb(134, 30%, 46%)
CMYK
cmyk(30%, 0%, 23%, 54%)
Oklch
oklch(52.8% 0.058 151.1)

Traditional「Celadon」· Paint「Forest Green」· 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

#E8175D

Dark Violet · Crimson · Camellia

HEX
#E8175D
RGB
rgb(232, 23, 93)
HSL
hsl(340, 82%, 50%)
HSB
hsb(340, 90%, 91%)
CMYK
cmyk(0%, 90%, 60%, 9%)
Oklch
oklch(60.0% 0.231 11.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302430
232F23

Analogous

29232F
302430
2F2329

Triadic

302430
2F2F23
232F2F

Split-Comp.

302430
292F23
232F29

Tetradic

302430
2F2923
232F23
23292F

Contrast Matrix WCAG 2.1 Contrast

302430
4B3E58
52755A
FFFFFF
E8175D
—
1.5
Fail
2.9
Fail
14.8
AAA
3.3
AA Large
1.5
Fail
—
1.9
Fail
9.9
AAA
2.2
Fail
2.9
Fail
1.9
Fail
—
5.2
AA
1.2
Fail
14.8
AAA
9.9
AAA
5.2
AA
—
4.5
AA Large
3.3
AA Large
2.2
Fail
1.2
Fail
4.5
AA Large
—
White BG
14.8AAA
9.9AAA
5.2AA
1.0Fail
4.5AA Large
Black BG
1.4Fail
2.1Fail
4.1AA Large
21.0AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B2D
454552
616161
FFFFFF
8E8C4C

Deuteranopia

2C2C2C
464750
5F5D62
FFFFFF
9AA948

Tritanopia

2F2B2A
4A4D4C
546667
FFFFFF
DE3F3C

Achromatopsia

292929
454545
676767
FFFFFF
5D5D5D

Shades & Tints Shades & Tints

#302430

Dark
Light

#4B3E58

Dark
Light

#52755A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302430;
  --color-2: #4b3e58;
  --color-3: #52755a;
  --color-4: #ffffff;
  --color-5: #e8175d;
}

SCSS

$color-1: #302430;
$color-2: #4b3e58;
$color-3: #52755a;
$color-4: #ffffff;
$color-5: #e8175d;

TAILWIND

colors: {
  'brand-1': '#302430',
  'brand-2': '#4b3e58',
  'brand-3': '#52755a',
  'brand-4': '#ffffff',
  'brand-5': '#e8175d',
}

RGB Array

[48, 36, 48], [75, 62, 88], [82, 117, 90], [255, 255, 255], [232, 23, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #302430, #4B3E58, #52755A, #FFFFFF, #E8175D is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #302430; --color-2: #4b3e58; --color-3: #52755a; --color-4: #ffffff; --color-5: #e8175d. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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