← Back to Editor

#C7D8B4 · #8AB5A4 · #60A8A7 · #313541 · #4F6175

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#C7D8B4

Willow Green · Silver · Apple Green

HEX
#C7D8B4
RGB
rgb(199, 216, 180)
HSL
hsl(88, 32%, 78%)
HSB
hsb(88, 17%, 85%)
CMYK
cmyk(8%, 0%, 17%, 15%)
Oklch
oklch(86.0% 0.052 128.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#8AB5A4

Jade · DarkSeaGreen · Apple Green

HEX
#8AB5A4
RGB
rgb(138, 181, 164)
HSL
hsl(156, 23%, 63%)
HSB
hsb(156, 24%, 71%)
CMYK
cmyk(24%, 0%, 9%, 29%)
Oklch
oklch(73.7% 0.052 168.7)

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

#60A8A7

Mineral Blue · CadetBlue · Lake Green

HEX
#60A8A7
RGB
rgb(96, 168, 167)
HSL
hsl(179, 29%, 52%)
HSB
hsb(179, 43%, 66%)
CMYK
cmyk(43%, 0%, 1%, 34%)
Oklch
oklch(68.4% 0.072 194.4)

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

#313541

Indigo · DarkSlateGray · Prussian Blue

HEX
#313541
RGB
rgb(49, 53, 65)
HSL
hsl(225, 14%, 22%)
HSB
hsb(225, 25%, 25%)
CMYK
cmyk(25%, 18%, 0%, 75%)
Oklch
oklch(33.0% 0.022 270.7)

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

#4F6175

Indigo · DimGray · Prussian Blue

HEX
#4F6175
RGB
rgb(79, 97, 117)
HSL
hsl(212, 19%, 38%)
HSB
hsb(212, 32%, 46%)
CMYK
cmyk(32%, 17%, 0%, 54%)
Oklch
oklch(48.5% 0.039 251.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7D8B4
C6B5D9

Analogous

D9D8B5
C7D8B4
B6D9B5

Triadic

C7D8B4
B5C8D9
D9B5C8

Split-Comp.

C7D8B4
B5B6D9
D8B5D9

Tetradic

C7D8B4
B5D9D8
C6B5D9
D9B5B6

Contrast Matrix WCAG 2.1 Contrast

C7D8B4
8AB5A4
60A8A7
313541
4F6175
—
1.5
Fail
1.8
Fail
8.1
AAA
4.2
AA Large
1.5
Fail
—
1.2
Fail
5.4
AA
2.8
Fail
1.8
Fail
1.2
Fail
—
4.5
AA Large
2.3
Fail
8.1
AAA
5.4
AA
4.5
AA Large
—
1.9
Fail
4.2
AA Large
2.8
Fail
2.3
Fail
1.9
Fail
—
White BG
1.5Fail
2.3Fail
2.7Fail
12.2AAA
6.4AA
Black BG
13.9AAA
9.2AAA
7.7AAA
1.7Fail
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECFBD
9D9DA8
7F80A7
33333E
575770

Deuteranopia

CDCCBF
9A97A9
7B76A7
33323D
56546F

Tritanopia

C8C4C5
8CABAC
64A7A7
313C3B
506C6C

Achromatopsia

CFCFCF
A6A6A6
929292
353535
5E5E5E

Shades & Tints Shades & Tints

#C7D8B4

Dark
Light

#8AB5A4

Dark
Light

#60A8A7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7d8b4;
  --color-2: #8ab5a4;
  --color-3: #60a8a7;
  --color-4: #313541;
  --color-5: #4f6175;
}

SCSS

$color-1: #c7d8b4;
$color-2: #8ab5a4;
$color-3: #60a8a7;
$color-4: #313541;
$color-5: #4f6175;

TAILWIND

colors: {
  'brand-1': '#c7d8b4',
  'brand-2': '#8ab5a4',
  'brand-3': '#60a8a7',
  'brand-4': '#313541',
  'brand-5': '#4f6175',
}

RGB Array

[199, 216, 180], [138, 181, 164], [96, 168, 167], [49, 53, 65], [79, 97, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #C7D8B4, #8AB5A4, #60A8A7, #313541, #4F6175 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: #c7d8b4; --color-2: #8ab5a4; --color-3: #60a8a7; --color-4: #313541; --color-5: #4f6175. 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