#456870 + #1C717A + #2F5158 + #024850 + #1C4048 · 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

#456870

Slate Blue · DimGray · Mint Ice

HEX

#456870

RGB

rgb(69, 104, 112)

HSL

hsl(191, 24%, 35%)

HSB

hsb(191, 38%, 44%)

CMYK

cmyk(38%, 7%, 0%, 56%)

Oklch

oklch(49.4% 0.042 213.6)

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

#1C717A

Lake Blue · Teal · Mint Ice

HEX

#1C717A

RGB

rgb(28, 113, 122)

HSL

hsl(186, 63%, 29%)

HSB

hsb(186, 77%, 48%)

CMYK

cmyk(77%, 7%, 0%, 52%)

Oklch

oklch(50.4% 0.078 205.6)

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

#2F5158

Slate Blue · DarkSlateGray · Mint Ice

HEX

#2F5158

RGB

rgb(47, 81, 88)

HSL

hsl(190, 30%, 26%)

HSB

hsb(190, 47%, 35%)

CMYK

cmyk(47%, 8%, 0%, 65%)

Oklch

oklch(41.2% 0.041 212.2)

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

#024850

Lake Blue · DarkSlateGray · Peacock Green

HEX

#024850

RGB

rgb(2, 72, 80)

HSL

hsl(186, 95%, 16%)

HSB

hsb(186, 98%, 31%)

CMYK

cmyk(98%, 10%, 0%, 69%)

Oklch

oklch(36.8% 0.062 207.6)

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

#1C4048

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1C4048

RGB

rgb(28, 64, 72)

HSL

hsl(191, 44%, 20%)

HSB

hsb(191, 61%, 28%)

CMYK

cmyk(61%, 11%, 0%, 72%)

Oklch

oklch(34.9% 0.043 214.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

456870

6F4C44

Analogous

446F61

456870

44516F

Triadic

456870

6F4467

676F44

Split-Comp.

456870

6F4451

6F6144

Tetradic

456870

61446F

6F4C44

516F44

Contrast Matrix WCAG 2.1 Contrast

456870	1C717A	2F5158	024850	1C4048
—	1.1 Fail	1.4 Fail	1.7 Fail	1.8 Fail
1.1 Fail	—	1.5 Fail	1.8 Fail	2.0 Fail
1.4 Fail	1.5 Fail	—	1.2 Fail	1.3 Fail
1.7 Fail	1.8 Fail	1.2 Fail	—	1.1 Fail
1.8 Fail	2.0 Fail	1.3 Fail	1.1 Fail	—

White BG

6.1AA

5.7AA

8.6AAA

10.3AAA

11.2AAA

Black BG

3.5AA Large

3.7AA Large

2.4Fail

2.0Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

54546E

414278

3E3E56

20214E

2C2C46

Deuteranopia

52506E

3C3677

3C3956

1C174E

2A2746

Tritanopia

476D6C

207676

315555

064D4C

1E4544

Achromatopsia

5E5E5E

595959

484848

343434

363636

Shades & Tints Shades & Tints

#456870

Dark

Light

#1C717A

Dark

Light

#2F5158

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #456870;
  --color-2: #1c717a;
  --color-3: #2f5158;
  --color-4: #024850;
  --color-5: #1c4048;
}

SCSS

$color-1: #456870;
$color-2: #1c717a;
$color-3: #2f5158;
$color-4: #024850;
$color-5: #1c4048;

TAILWIND

colors: {
  'brand-1': '#456870',
  'brand-2': '#1c717a',
  'brand-3': '#2f5158',
  'brand-4': '#024850',
  'brand-5': '#1c4048',
}

RGB Array

[69, 104, 112], [28, 113, 122], [47, 81, 88], [2, 72, 80], [28, 64, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #456870, #1C717A, #2F5158, #024850, #1C4048 is ideal for: tech websites, dark mode UIs, game UIs. 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: #456870; --color-2: #1c717a; --color-3: #2f5158; --color-4: #024850; --color-5: #1c4048. 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 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