← Back to Editor

#303233 · #494F52 · #4D5D66 · #516773 · #597F94

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#303233

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#303233
RGB
rgb(48, 50, 51)
HSL
hsl(200, 3%, 19%)
HSB
hsb(200, 6%, 20%)
CMYK
cmyk(6%, 2%, 0%, 80%)
Oklch
oklch(31.6% 0.003 228.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#494F52

Dark Cyan · DarkSlateGray · Charcoal

HEX
#494F52
RGB
rgb(73, 79, 82)
HSL
hsl(200, 6%, 30%)
HSB
hsb(200, 11%, 32%)
CMYK
cmyk(11%, 4%, 0%, 68%)
Oklch
oklch(42.3% 0.009 229.0)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#4D5D66

Slate Blue · DimGray · Prussian Blue

HEX
#4D5D66
RGB
rgb(77, 93, 102)
HSL
hsl(202, 14%, 35%)
HSB
hsb(202, 25%, 40%)
CMYK
cmyk(25%, 9%, 0%, 60%)
Oklch
oklch(46.8% 0.025 232.7)

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

#516773

Slate Blue · DimGray · Prussian Blue

HEX
#516773
RGB
rgb(81, 103, 115)
HSL
hsl(201, 17%, 38%)
HSB
hsb(201, 30%, 45%)
CMYK
cmyk(30%, 10%, 0%, 55%)
Oklch
oklch(50.0% 0.033 232.1)

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

#597F94

Slate Blue · SlateGray · Navy Blue

HEX
#597F94
RGB
rgb(89, 127, 148)
HSL
hsl(201, 25%, 46%)
HSB
hsb(201, 40%, 58%)
CMYK
cmyk(40%, 14%, 0%, 42%)
Oklch
oklch(57.6% 0.053 233.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

303233
32302F

Analogous

2F3231
303233
2F2F32

Triadic

303233
322F31
31322F

Split-Comp.

303233
322F2F
32312F

Tetradic

303233
312F32
32302F
2F322F

Contrast Matrix WCAG 2.1 Contrast

303233
494F52
4D5D66
516773
597F94
—
1.5
Fail
1.9
Fail
2.2
Fail
3.0
Fail
1.5
Fail
—
1.2
Fail
1.4
Fail
1.9
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
2.2
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
3.0
Fail
1.9
Fail
1.6
Fail
1.4
Fail
—
White BG
12.9AAA
8.3AAA
6.8AA
5.9AA
4.3AA Large
Black BG
1.6Fail
2.5Fail
3.1AA Large
3.5AA Large
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313133
4C4C51
545464
5B5B70
696A8F

Deuteranopia

313133
4B4B51
535263
59586F
67648E

Tritanopia

303333
495151
4E6262
526E6D
5B8B8A

Achromatopsia

323232
4E4E4E
595959
626262
767676

Shades & Tints Shades & Tints

#303233

Dark
Light

#494F52

Dark
Light

#4D5D66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #303233;
  --color-2: #494f52;
  --color-3: #4d5d66;
  --color-4: #516773;
  --color-5: #597f94;
}

SCSS

$color-1: #303233;
$color-2: #494f52;
$color-3: #4d5d66;
$color-4: #516773;
$color-5: #597f94;

TAILWIND

colors: {
  'brand-1': '#303233',
  'brand-2': '#494f52',
  'brand-3': '#4d5d66',
  'brand-4': '#516773',
  'brand-5': '#597f94',
}

RGB Array

[48, 50, 51], [73, 79, 82], [77, 93, 102], [81, 103, 115], [89, 127, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #303233, #494F52, #4D5D66, #516773, #597F94 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #303233; --color-2: #494f52; --color-3: #4d5d66; --color-4: #516773; --color-5: #597f94. 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. 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 finance, legal, luxury 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