← Back to Editor

#358A77 · #96B2A6 · #ECDCC2 · #DF9980 · #BF312F

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

#358A77

Mineral Blue · SeaGreen · Mint Ice

HEX
#358A77
RGB
rgb(53, 138, 119)
HSL
hsl(167, 45%, 37%)
HSB
hsb(167, 62%, 54%)
CMYK
cmyk(62%, 0%, 14%, 46%)
Oklch
oklch(57.6% 0.087 175.8)

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

#96B2A6

Jade · DarkGray · Apple Green

HEX
#96B2A6
RGB
rgb(150, 178, 166)
HSL
hsl(154, 15%, 64%)
HSB
hsb(154, 16%, 70%)
CMYK
cmyk(16%, 0%, 7%, 30%)
Oklch
oklch(73.9% 0.035 167.6)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#ECDCC2

Goose Yellow · Wheat · Peach Orange

HEX
#ECDCC2
RGB
rgb(236, 220, 194)
HSL
hsl(37, 53%, 84%)
HSB
hsb(37, 18%, 93%)
CMYK
cmyk(0%, 7%, 18%, 7%)
Oklch
oklch(90.1% 0.039 80.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#DF9980

Apricot · DarkSalmon · Warm Sun

HEX
#DF9980
RGB
rgb(223, 153, 128)
HSL
hsl(16, 60%, 69%)
HSB
hsb(16, 43%, 87%)
CMYK
cmyk(0%, 31%, 43%, 13%)
Oklch
oklch(74.6% 0.092 40.5)

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

#BF312F

Vermilion · FireBrick · Passion Red

HEX
#BF312F
RGB
rgb(191, 49, 47)
HSL
hsl(1, 61%, 47%)
HSB
hsb(1, 75%, 75%)
CMYK
cmyk(0%, 74%, 75%, 25%)
Oklch
oklch(53.4% 0.179 26.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

358A77
893446

Analogous

34894C
358A77
347189

Triadic

358A77
763489
897634

Split-Comp.

358A77
893471
894C34

Tetradic

358A77
4C3489
893446
718934

Contrast Matrix WCAG 2.1 Contrast

358A77
96B2A6
ECDCC2
DF9980
BF312F
—
1.8
Fail
3.1
AA Large
1.8
Fail
1.4
Fail
1.8
Fail
—
1.7
Fail
1.0
Fail
2.5
Fail
3.1
AA Large
1.7
Fail
—
1.7
Fail
4.2
AA Large
1.8
Fail
1.0
Fail
1.7
Fail
—
2.4
Fail
1.4
Fail
2.5
Fail
4.2
AA Large
2.4
Fail
—
White BG
4.2AA Large
2.3Fail
1.3Fail
2.3Fail
5.7AA
Black BG
5.1AA
9.2AAA
15.6AAA
9.0AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5B7C
A2A2A9
E5E5C8
C1C086
82802F

Deuteranopia

554F7D
A19EAA
E6E7CA
C5CA88
8A9430

Tritanopia

397F80
97ABAC
EBCDCE
DC8B8C
B83030

Achromatopsia

6E6E6E
A8A8A8
DEDEDE
ABABAB
5B5B5B

Shades & Tints Shades & Tints

#358A77

Dark
Light

#96B2A6

Dark
Light

#ECDCC2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #358a77;
  --color-2: #96b2a6;
  --color-3: #ecdcc2;
  --color-4: #df9980;
  --color-5: #bf312f;
}

SCSS

$color-1: #358a77;
$color-2: #96b2a6;
$color-3: #ecdcc2;
$color-4: #df9980;
$color-5: #bf312f;

TAILWIND

colors: {
  'brand-1': '#358a77',
  'brand-2': '#96b2a6',
  'brand-3': '#ecdcc2',
  'brand-4': '#df9980',
  'brand-5': '#bf312f',
}

RGB Array

[53, 138, 119], [150, 178, 166], [236, 220, 194], [223, 153, 128], [191, 49, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #358A77, #96B2A6, #ECDCC2, #DF9980, #BF312F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #358a77; --color-2: #96b2a6; --color-3: #ecdcc2; --color-4: #df9980; --color-5: #bf312f. 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. 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