#587980 + #957F8C + #AF8086 + #DC847A + #FBA477 · 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

#587980

Slate Blue · SlateGray · Mint Ice

HEX

#587980

RGB

rgb(88, 121, 128)

HSL

hsl(191, 19%, 42%)

HSB

hsb(191, 31%, 50%)

CMYK

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

Oklch

oklch(55.3% 0.039 212.2)

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

#957F8C

Rose Purple · Gray · Warm Gray

HEX

#957F8C

RGB

rgb(149, 127, 140)

HSL

hsl(325, 9%, 54%)

HSB

hsb(325, 15%, 58%)

CMYK

cmyk(0%, 15%, 6%, 42%)

Oklch

oklch(62.1% 0.033 341.8)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#AF8086

Crimson · Gray · Passion Red

HEX

#AF8086

RGB

rgb(175, 128, 134)

HSL

hsl(352, 23%, 59%)

HSB

hsb(352, 27%, 69%)

CMYK

cmyk(0%, 27%, 23%, 31%)

Oklch

oklch(64.8% 0.059 10.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#DC847A

Peach Pink · LightCoral · Coral Red

HEX

#DC847A

RGB

rgb(220, 132, 122)

HSL

hsl(6, 58%, 67%)

HSB

hsb(6, 45%, 86%)

CMYK

cmyk(0%, 40%, 45%, 14%)

Oklch

oklch(70.4% 0.110 27.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FBA477

Apricot · LightSalmon · Warm Sun

HEX

#FBA477

RGB

rgb(251, 164, 119)

HSL

hsl(20, 94%, 73%)

HSB

hsb(20, 53%, 98%)

CMYK

cmyk(0%, 35%, 53%, 2%)

Oklch

oklch(79.5% 0.120 47.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

587980

7F5E57

Analogous

577F73

587980

57647F

Triadic

587980

7F5778

787F57

Split-Comp.

587980

7F5764

7F7357

Tetradic

587980

73577F

7F5E57

647F57

Contrast Matrix WCAG 2.1 Contrast

587980	957F8C	AF8086	DC847A	FBA477
—	1.3 Fail	1.4 Fail	1.7 Fail	2.4 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.9 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.7 Fail
1.7 Fail	1.3 Fail	1.2 Fail	—	1.4 Fail
2.4 Fail	1.9 Fail	1.7 Fail	1.4 Fail	—

White BG

4.7AA

3.7AA Large

3.4AA Large

2.8Fail

2.0Fail

Black BG

4.5AA Large

5.7AA

6.3AA

7.6AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66677E

8B8B89

9B9A85

B6B57C

D5D582

Deuteranopia

64627E

8D8E88

9DA184

BBC27D

DAE185

Tritanopia

5A7D7D

948686

AD8383

D87E7F

F78A8C

Achromatopsia

707070

878787

8F8F8F

9D9D9D

B9B9B9

Shades & Tints Shades & Tints

#587980

Dark

Light

#957F8C

Dark

Light

#AF8086

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #587980;
  --color-2: #957f8c;
  --color-3: #af8086;
  --color-4: #dc847a;
  --color-5: #fba477;
}

SCSS

$color-1: #587980;
$color-2: #957f8c;
$color-3: #af8086;
$color-4: #dc847a;
$color-5: #fba477;

TAILWIND

colors: {
  'brand-1': '#587980',
  'brand-2': '#957f8c',
  'brand-3': '#af8086',
  'brand-4': '#dc847a',
  'brand-5': '#fba477',
}

RGB Array

[88, 121, 128], [149, 127, 140], [175, 128, 134], [220, 132, 122], [251, 164, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #587980, #957F8C, #AF8086, #DC847A, #FBA477 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: #587980; --color-2: #957f8c; --color-3: #af8086; --color-4: #dc847a; --color-5: #fba477. 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