← Back to Editor

#394541 · #5A797E · #77887E · #9FA48D · #DDD2B6

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#394541

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#394541
RGB
rgb(57, 69, 65)
HSL
hsl(160, 10%, 25%)
HSB
hsb(160, 17%, 27%)
CMYK
cmyk(17%, 0%, 6%, 73%)
Oklch
oklch(37.8% 0.017 173.2)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#5A797E

Slate Blue · SlateGray · Mint Ice

HEX
#5A797E
RGB
rgb(90, 121, 126)
HSL
hsl(188, 17%, 42%)
HSB
hsb(188, 29%, 49%)
CMYK
cmyk(29%, 4%, 0%, 51%)
Oklch
oklch(55.4% 0.036 208.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#77887E

Ink Gray · Gray · Warm Gray

HEX
#77887E
RGB
rgb(119, 136, 126)
HSL
hsl(145, 7%, 50%)
HSB
hsb(145, 12%, 53%)
CMYK
cmyk(12%, 0%, 7%, 47%)
Oklch
oklch(61.0% 0.025 159.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#9FA48D

Grass Green · DarkSeaGreen · Olive Green

HEX
#9FA48D
RGB
rgb(159, 164, 141)
HSL
hsl(73, 11%, 60%)
HSB
hsb(73, 14%, 64%)
CMYK
cmyk(3%, 0%, 14%, 36%)
Oklch
oklch(70.8% 0.033 117.2)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#DDD2B6

Goose Yellow · Wheat · Lemon Cream

HEX
#DDD2B6
RGB
rgb(221, 210, 182)
HSL
hsl(43, 36%, 79%)
HSB
hsb(43, 18%, 87%)
CMYK
cmyk(0%, 5%, 18%, 13%)
Oklch
oklch(86.5% 0.039 89.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

394541
46393E

Analogous

39463B
394541
394446

Triadic

394541
423946
464239

Split-Comp.

394541
463944
463C39

Tetradic

394541
3C3946
46393E
444639

Contrast Matrix WCAG 2.1 Contrast

394541
5A797E
77887E
9FA48D
DDD2B6
—
2.1
Fail
2.7
Fail
3.9
AA Large
6.6
AA
2.1
Fail
—
1.3
Fail
1.8
Fail
3.1
AA Large
2.7
Fail
1.3
Fail
—
1.5
Fail
2.5
Fail
3.9
AA Large
1.8
Fail
1.5
Fail
—
1.7
Fail
6.6
AA
3.1
AA Large
2.5
Fail
1.7
Fail
—
White BG
10.0AAA
4.7AA
3.7AA Large
2.6Fail
1.5Fail
Black BG
2.1Fail
4.5AA Large
5.6AA
8.2AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E42
67687D
7E7F80
A1A193
D8D8BD

Deuteranopia

3E3D42
66637C
7D7C81
A1A194
D9DABE

Tritanopia

3A4343
5C7C7C
788283
9F9798
DCC2C3

Achromatopsia

414141
707070
828282
A0A0A0
D2D2D2

Shades & Tints Shades & Tints

#394541

Dark
Light

#5A797E

Dark
Light

#77887E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #394541;
  --color-2: #5a797e;
  --color-3: #77887e;
  --color-4: #9fa48d;
  --color-5: #ddd2b6;
}

SCSS

$color-1: #394541;
$color-2: #5a797e;
$color-3: #77887e;
$color-4: #9fa48d;
$color-5: #ddd2b6;

TAILWIND

colors: {
  'brand-1': '#394541',
  'brand-2': '#5a797e',
  'brand-3': '#77887e',
  'brand-4': '#9fa48d',
  'brand-5': '#ddd2b6',
}

RGB Array

[57, 69, 65], [90, 121, 126], [119, 136, 126], [159, 164, 141], [221, 210, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #394541, #5A797E, #77887E, #9FA48D, #DDD2B6 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: #394541; --color-2: #5a797e; --color-3: #77887e; --color-4: #9fa48d; --color-5: #ddd2b6. 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 sea-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