← Back to Editor

#424F4F · #242B2B · #331022 · #662150 · #505A66

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#424F4F

Slate Blue · DarkSlateGray · Charcoal

HEX
#424F4F
RGB
rgb(66, 79, 79)
HSL
hsl(180, 9%, 28%)
HSB
hsb(180, 16%, 31%)
CMYK
cmyk(16%, 0%, 0%, 69%)
Oklch
oklch(41.6% 0.017 196.5)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#242B2B

Slate Blue · DarkSlateGray · Dark Stone

HEX
#242B2B
RGB
rgb(36, 43, 43)
HSL
hsl(180, 9%, 15%)
HSB
hsb(180, 16%, 17%)
CMYK
cmyk(16%, 0%, 0%, 83%)
Oklch
oklch(28.2% 0.010 196.6)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#331022

Rose Purple · Black · Raspberry

HEX
#331022
RGB
rgb(51, 16, 34)
HSL
hsl(329, 52%, 13%)
HSB
hsb(329, 69%, 20%)
CMYK
cmyk(0%, 69%, 33%, 80%)
Oklch
oklch(23.6% 0.062 350.8)

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

#662150

Rose Purple · Purple · Eggplant

HEX
#662150
RGB
rgb(102, 33, 80)
HSL
hsl(319, 51%, 26%)
HSB
hsb(319, 68%, 40%)
CMYK
cmyk(0%, 68%, 22%, 60%)
Oklch
oklch(37.1% 0.114 342.5)

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

#505A66

Indigo · DimGray · Prussian Blue

HEX
#505A66
RGB
rgb(80, 90, 102)
HSL
hsl(213, 12%, 36%)
HSB
hsb(213, 22%, 40%)
CMYK
cmyk(22%, 12%, 0%, 60%)
Oklch
oklch(46.3% 0.023 253.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

424F4F
4E4141

Analogous

414E47
424F4F
41474E

Triadic

424F4F
4E414E
4E4E41

Split-Comp.

424F4F
4E4147
4E4741

Tetradic

424F4F
47414E
4E4141
474E41

Contrast Matrix WCAG 2.1 Contrast

424F4F
242B2B
331022
662150
505A66
—
1.7
Fail
2.0
Fail
1.3
Fail
1.2
Fail
1.7
Fail
—
1.2
Fail
1.3
Fail
2.1
Fail
2.0
Fail
1.2
Fail
—
1.5
Fail
2.4
Fail
1.3
Fail
1.3
Fail
1.5
Fail
—
1.6
Fail
1.2
Fail
2.1
Fail
2.4
Fail
1.6
Fail
—
White BG
8.5AAA
14.4AAA
17.0AAA
11.1AAA
7.0AAA
Black BG
2.5Fail
1.5Fail
1.2Fail
1.9Fail
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

48484F
27272B
24241E
484845
545463

Deuteranopia

47464F
27262B
26281D
4C5142
545362

Tritanopia

434F4F
242B2B
311A19
633C3A
516160

Achromatopsia

4B4B4B
292929
1D1D1D
3B3B3B
585858

Shades & Tints Shades & Tints

#424F4F

Dark
Light

#242B2B

Dark
Light

#331022

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #424f4f;
  --color-2: #242b2b;
  --color-3: #331022;
  --color-4: #662150;
  --color-5: #505a66;
}

SCSS

$color-1: #424f4f;
$color-2: #242b2b;
$color-3: #331022;
$color-4: #662150;
$color-5: #505a66;

TAILWIND

colors: {
  'brand-1': '#424f4f',
  'brand-2': '#242b2b',
  'brand-3': '#331022',
  'brand-4': '#662150',
  'brand-5': '#505a66',
}

RGB Array

[66, 79, 79], [36, 43, 43], [51, 16, 34], [102, 33, 80], [80, 90, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #424F4F, #242B2B, #331022, #662150, #505A66 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: #424f4f; --color-2: #242b2b; --color-3: #331022; --color-4: #662150; --color-5: #505a66. 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 sea-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