← Back to Editor

#ECD8CD · #C8D1CE · #656B83 · #74909C · #5B5768

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

#ECD8CD

Apricot · Bisque · Peach Orange

HEX
#ECD8CD
RGB
rgb(236, 216, 205)
HSL
hsl(21, 45%, 86%)
HSB
hsb(21, 13%, 93%)
CMYK
cmyk(0%, 8%, 13%, 7%)
Oklch
oklch(89.6% 0.027 50.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#C8D1CE

Jade · LightGray · Pearl Gray

HEX
#C8D1CE
RGB
rgb(200, 209, 206)
HSL
hsl(160, 9%, 80%)
HSB
hsb(160, 4%, 82%)
CMYK
cmyk(4%, 0%, 1%, 18%)
Oklch
oklch(85.3% 0.011 174.2)

Traditional「Jade」· Paint「Pearl Gray」· Creative Silver Lining

#656B83

Indigo · DimGray · Navy Blue

HEX
#656B83
RGB
rgb(101, 107, 131)
HSL
hsl(228, 13%, 45%)
HSB
hsb(228, 23%, 51%)
CMYK
cmyk(23%, 18%, 0%, 49%)
Oklch
oklch(53.2% 0.038 274.0)

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

#74909C

Slate Blue · LightSlateGray · Lake Green

HEX
#74909C
RGB
rgb(116, 144, 156)
HSL
hsl(198, 17%, 53%)
HSB
hsb(198, 26%, 61%)
CMYK
cmyk(26%, 8%, 0%, 39%)
Oklch
oklch(63.6% 0.036 225.8)

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

#5B5768

Deep Indigo · DimGray · Charcoal

HEX
#5B5768
RGB
rgb(91, 87, 104)
HSL
hsl(254, 9%, 37%)
HSB
hsb(254, 16%, 41%)
CMYK
cmyk(12%, 16%, 0%, 59%)
Oklch
oklch(46.7% 0.028 296.1)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECD8CD
CBE0EB

Analogous

EBCBD0
ECD8CD
EBE7CB

Triadic

ECD8CD
CBEBD6
D6CBEB

Split-Comp.

ECD8CD
CBEBE7
CBD0EB

Tetradic

ECD8CD
D0EBCB
CBE0EB
E7CBEB

Contrast Matrix WCAG 2.1 Contrast

ECD8CD
C8D1CE
656B83
74909C
5B5768
—
1.1
Fail
3.8
AA Large
2.5
Fail
5.1
AA
1.1
Fail
—
3.4
AA Large
2.2
Fail
4.5
AA Large
3.8
AA Large
3.4
AA Large
—
1.6
Fail
1.3
Fail
2.5
Fail
2.2
Fail
1.6
Fail
—
2.1
Fail
5.1
AA
4.5
AA Large
1.3
Fail
2.1
Fail
—
White BG
1.4Fail
1.6Fail
5.3AA
3.4AA Large
7.0AA
Black BG
15.3AAA
13.5AAA
4.0AA Large
6.2AA
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3D0
CCCCCF
68687D
808099
595964

Deuteranopia

E5E6D0
CBCBCF
67677C
7F7C98
5A5A63

Tritanopia

EBD2D2
C8CFCF
657978
759796
5B6160

Achromatopsia

DDDDDD
CECECE
6C6C6C
898989
5A5A5A

Shades & Tints Shades & Tints

#ECD8CD

Dark
Light

#C8D1CE

Dark
Light

#656B83

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecd8cd;
  --color-2: #c8d1ce;
  --color-3: #656b83;
  --color-4: #74909c;
  --color-5: #5b5768;
}

SCSS

$color-1: #ecd8cd;
$color-2: #c8d1ce;
$color-3: #656b83;
$color-4: #74909c;
$color-5: #5b5768;

TAILWIND

colors: {
  'brand-1': '#ecd8cd',
  'brand-2': '#c8d1ce',
  'brand-3': '#656b83',
  'brand-4': '#74909c',
  'brand-5': '#5b5768',
}

RGB Array

[236, 216, 205], [200, 209, 206], [101, 107, 131], [116, 144, 156], [91, 87, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #ECD8CD, #C8D1CE, #656B83, #74909C, #5B5768 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ecd8cd; --color-2: #c8d1ce; --color-3: #656b83; --color-4: #74909c; --color-5: #5b5768. 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. Restrained colors convey professionalism and trust. 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