#556270 + #546976 + #4EC6BF + #5DD1B7 + #53737D · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#556270

Indigo · DimGray · Prussian Blue

HEX

#556270

RGB

rgb(85, 98, 112)

HSL

hsl(211, 14%, 39%)

HSB

hsb(211, 24%, 44%)

CMYK

cmyk(24%, 13%, 0%, 56%)

Oklch

oklch(49.0% 0.028 250.3)

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

#546976

Slate Blue · DimGray · Prussian Blue

HEX

#546976

RGB

rgb(84, 105, 118)

HSL

hsl(203, 17%, 40%)

HSB

hsb(203, 29%, 46%)

CMYK

cmyk(29%, 11%, 0%, 54%)

Oklch

oklch(50.9% 0.033 235.5)

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

#4EC6BF

Mineral Blue · MediumTurquoise · Lake Green

HEX

#4EC6BF

RGB

rgb(78, 198, 191)

HSL

hsl(177, 51%, 54%)

HSB

hsb(177, 61%, 78%)

CMYK

cmyk(61%, 0%, 4%, 22%)

Oklch

oklch(75.8% 0.107 189.8)

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

#5DD1B7

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#5DD1B7

RGB

rgb(93, 209, 183)

HSL

hsl(167, 56%, 59%)

HSB

hsb(167, 56%, 82%)

CMYK

cmyk(56%, 0%, 12%, 18%)

Oklch

oklch(78.7% 0.112 176.2)

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

#53737D

Slate Blue · DimGray · Mint Ice

HEX

#53737D

RGB

rgb(83, 115, 125)

HSL

hsl(194, 20%, 41%)

HSB

hsb(194, 34%, 49%)

CMYK

cmyk(34%, 8%, 0%, 51%)

Oklch

oklch(53.5% 0.040 219.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

556270

716456

Analogous

567171

556270

565671

Triadic

556270

715663

637156

Split-Comp.

556270

715656

717156

Tetradic

556270

715671

716456

567156

Contrast Matrix WCAG 2.1 Contrast

556270	546976	4EC6BF	5DD1B7	53737D
—	1.1 Fail	3.0 AA Large	3.3 AA Large	1.2 Fail
1.1 Fail	—	2.8 Fail	3.1 AA Large	1.1 Fail
3.0 AA Large	2.8 Fail	—	1.1 Fail	2.5 Fail
3.3 AA Large	3.1 AA Large	1.1 Fail	—	2.7 Fail
1.2 Fail	1.1 Fail	2.5 Fail	2.7 Fail	—

White BG

6.2AA

5.7AA

2.1Fail

1.9Fail

5.1AA

Black BG

3.4AA Large

3.7AA Large

10.2AAA

11.3AAA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B6D

5D5D73

8283C1

8F90BD

61617B

Deuteranopia

5A596C

5C5A72

7B72C1

8980BF

5F5D7A

Tritanopia

566A69

557070

54C2C2

63C2C3

557978

Achromatopsia

606060

646464

A1A1A1

ABABAB

6B6B6B

Shades & Tints Shades & Tints

#556270

Dark

Light

#546976

Dark

Light

#4EC6BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #556270;
  --color-2: #546976;
  --color-3: #4ec6bf;
  --color-4: #5dd1b7;
  --color-5: #53737d;
}

SCSS

$color-1: #556270;
$color-2: #546976;
$color-3: #4ec6bf;
$color-4: #5dd1b7;
$color-5: #53737d;

TAILWIND

colors: {
  'brand-1': '#556270',
  'brand-2': '#546976',
  'brand-3': '#4ec6bf',
  'brand-4': '#5dd1b7',
  'brand-5': '#53737d',
}

RGB Array

[85, 98, 112], [84, 105, 118], [78, 198, 191], [93, 209, 183], [83, 115, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #556270, #546976, #4EC6BF, #5DD1B7, #53737D is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #556270; --color-2: #546976; --color-3: #4ec6bf; --color-4: #5dd1b7; --color-5: #53737d. 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. 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. 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