← Back to Editor

#D7E5C1 · #BDD3AF · #7DA49F · #487683 · #24475B

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

#D7E5C1

Willow Green · LightGray · Mint Green

HEX
#D7E5C1
RGB
rgb(215, 229, 193)
HSL
hsl(83, 41%, 83%)
HSB
hsb(83, 16%, 90%)
CMYK
cmyk(6%, 0%, 16%, 10%)
Oklch
oklch(90.2% 0.050 124.7)

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

#BDD3AF

Celadon · Silver · Apple Green

HEX
#BDD3AF
RGB
rgb(189, 211, 175)
HSL
hsl(97, 29%, 76%)
HSB
hsb(97, 17%, 83%)
CMYK
cmyk(10%, 0%, 17%, 17%)
Oklch
oklch(84.1% 0.054 133.3)

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

#7DA49F

Mineral Blue · LightSlateGray · Lake Green

HEX
#7DA49F
RGB
rgb(125, 164, 159)
HSL
hsl(172, 18%, 57%)
HSB
hsb(172, 24%, 64%)
CMYK
cmyk(24%, 0%, 3%, 36%)
Oklch
oklch(68.9% 0.043 186.5)

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

#487683

Slate Blue · SlateGray · Mint Ice

HEX
#487683
RGB
rgb(72, 118, 131)
HSL
hsl(193, 29%, 40%)
HSB
hsb(193, 45%, 51%)
CMYK
cmyk(45%, 10%, 0%, 49%)
Oklch
oklch(53.8% 0.054 217.8)

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

#24475B

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#24475B
RGB
rgb(36, 71, 91)
HSL
hsl(202, 43%, 25%)
HSB
hsb(202, 60%, 36%)
CMYK
cmyk(60%, 22%, 0%, 64%)
Oklch
oklch(38.1% 0.053 235.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7E5C1
D0C2E5

Analogous

E5E1C2
D7E5C1
C6E5C2

Triadic

D7E5C1
C2D8E5
E5C2D8

Split-Comp.

D7E5C1
C2C6E5
E1C2E5

Tetradic

D7E5C1
C2E5E1
D0C2E5
E5C2C6

Contrast Matrix WCAG 2.1 Contrast

D7E5C1
BDD3AF
7DA49F
487683
24475B
—
1.2
Fail
2.1
Fail
3.8
AA Large
7.5
AAA
1.2
Fail
—
1.7
Fail
3.1
AA Large
6.2
AA
2.1
Fail
1.7
Fail
—
1.8
Fail
3.6
AA Large
3.8
AA Large
3.1
AA Large
1.8
Fail
—
2.0
Fail
7.5
AAA
6.2
AA
3.6
AA Large
2.0
Fail
—
White BG
1.3Fail
1.6Fail
2.7Fail
5.0AA
9.9AAA
Black BG
15.9AAA
13.1AAA
7.7AAA
4.2AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDCA
C7C7B8
8E8EA0
5C5C80
333356

Deuteranopia

DCDBCC
C5C4BA
8C89A1
59567F
312F55

Tritanopia

D8D1D2
BEBFC0
7FA1A1
4A7D7D
265252

Achromatopsia

DDDDDD
C8C8C8
989898
6A6A6A
3F3F3F

Shades & Tints Shades & Tints

#D7E5C1

Dark
Light

#BDD3AF

Dark
Light

#7DA49F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7e5c1;
  --color-2: #bdd3af;
  --color-3: #7da49f;
  --color-4: #487683;
  --color-5: #24475b;
}

SCSS

$color-1: #d7e5c1;
$color-2: #bdd3af;
$color-3: #7da49f;
$color-4: #487683;
$color-5: #24475b;

TAILWIND

colors: {
  'brand-1': '#d7e5c1',
  'brand-2': '#bdd3af',
  'brand-3': '#7da49f',
  'brand-4': '#487683',
  'brand-5': '#24475b',
}

RGB Array

[215, 229, 193], [189, 211, 175], [125, 164, 159], [72, 118, 131], [36, 71, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #D7E5C1, #BDD3AF, #7DA49F, #487683, #24475B 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: #d7e5c1; --color-2: #bdd3af; --color-3: #7da49f; --color-4: #487683; --color-5: #24475b. 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