#587F7A + #716F32 + #503D1C + #3A8E7D + #76B98D · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#587F7A

Mineral Blue · SlateGray · Mint Ice

HEX

#587F7A

RGB

rgb(88, 127, 122)

HSL

hsl(172, 18%, 42%)

HSB

hsb(172, 31%, 50%)

CMYK

cmyk(31%, 0%, 4%, 50%)

Oklch

oklch(56.6% 0.044 186.1)

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

#716F32

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#716F32

RGB

rgb(113, 111, 50)

HSL

hsl(58, 39%, 32%)

HSB

hsb(58, 56%, 44%)

CMYK

cmyk(0%, 2%, 56%, 56%)

Oklch

oklch(53.0% 0.083 107.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#503D1C

Ochre · DarkOliveGreen · Cinnamon

HEX

#503D1C

RGB

rgb(80, 61, 28)

HSL

hsl(38, 48%, 21%)

HSB

hsb(38, 65%, 31%)

CMYK

cmyk(0%, 24%, 65%, 69%)

Oklch

oklch(37.3% 0.055 79.5)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#3A8E7D

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#3A8E7D

RGB

rgb(58, 142, 125)

HSL

hsl(168, 42%, 39%)

HSB

hsb(168, 59%, 56%)

CMYK

cmyk(59%, 0%, 12%, 44%)

Oklch

oklch(59.0% 0.085 177.7)

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

#76B98D

Celadon · DarkSeaGreen · Olive Green

HEX

#76B98D

RGB

rgb(118, 185, 141)

HSL

hsl(141, 32%, 59%)

HSB

hsb(141, 36%, 73%)

CMYK

cmyk(36%, 0%, 24%, 27%)

Oklch

oklch(72.9% 0.094 154.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

587F7A

7E585D

Analogous

587E66

587F7A

58707E

Triadic

587F7A

79587E

7E7958

Split-Comp.

587F7A

7E5870

7E6658

Tetradic

587F7A

66587E

7E585D

707E58

Contrast Matrix WCAG 2.1 Contrast

587F7A	716F32	503D1C	3A8E7D	76B98D
—	1.2 Fail	2.3 Fail	1.1 Fail	1.9 Fail
1.2 Fail	—	2.0 Fail	1.3 Fail	2.3 Fail
2.3 Fail	2.0 Fail	—	2.6 Fail	4.5 AA Large
1.1 Fail	1.3 Fail	2.6 Fail	—	1.7 Fail
1.9 Fail	2.3 Fail	4.5 AA Large	1.7 Fail	—

White BG

4.4AA Large

5.2AA

10.4AAA

3.9AA Large

2.3Fail

Black BG

4.7AA

4.0AA Large

2.0Fail

5.3AA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

69697B

707041

484824

5E5F81

939498

Deuteranopia

67647C

707044

494A26

5A5382

8F8A9A

Tritanopia

5A7C7C

714C4F

4F2A2C

3E8485

79A0A2

Achromatopsia

737373

696969

3F3F3F

737373

A0A0A0

Shades & Tints Shades & Tints

#587F7A

Dark

Light

#716F32

Dark

Light

#503D1C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #587f7a;
  --color-2: #716f32;
  --color-3: #503d1c;
  --color-4: #3a8e7d;
  --color-5: #76b98d;
}

SCSS

$color-1: #587f7a;
$color-2: #716f32;
$color-3: #503d1c;
$color-4: #3a8e7d;
$color-5: #76b98d;

TAILWIND

colors: {
  'brand-1': '#587f7a',
  'brand-2': '#716f32',
  'brand-3': '#503d1c',
  'brand-4': '#3a8e7d',
  'brand-5': '#76b98d',
}

RGB Array

[88, 127, 122], [113, 111, 50], [80, 61, 28], [58, 142, 125], [118, 185, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #587F7A, #716F32, #503D1C, #3A8E7D, #76B98D 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: #587f7a; --color-2: #716f32; --color-3: #503d1c; --color-4: #3a8e7d; --color-5: #76b98d. 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