← Back to Editor

#D95959 · #B5C5C9 · #F2F2F2 · #484A66 · #545775

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

#D95959

Vermilion · Tomato · Passion Red

HEX
#D95959
RGB
rgb(217, 89, 89)
HSL
hsl(0, 63%, 60%)
HSB
hsb(0, 59%, 85%)
CMYK
cmyk(0%, 59%, 59%, 15%)
Oklch
oklch(62.9% 0.162 22.9)

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

#B5C5C9

Sky Blue · Silver · Lake Green

HEX
#B5C5C9
RGB
rgb(181, 197, 201)
HSL
hsl(192, 16%, 75%)
HSB
hsb(192, 10%, 79%)
CMYK
cmyk(10%, 2%, 0%, 21%)
Oklch
oklch(81.2% 0.018 214.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#F2F2F2

Plain White · SeaShell · Cloud White

HEX
#F2F2F2
RGB
rgb(242, 242, 242)
HSL
hsl(0, 0%, 95%)
HSB
hsb(0, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#484A66

Indigo · DarkSlateGray · Prussian Blue

HEX
#484A66
RGB
rgb(72, 74, 102)
HSL
hsl(236, 17%, 34%)
HSB
hsb(236, 29%, 40%)
CMYK
cmyk(29%, 27%, 0%, 60%)
Oklch
oklch(41.9% 0.047 281.0)

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

#545775

Indigo · DimGray · Prussian Blue

HEX
#545775
RGB
rgb(84, 87, 117)
HSL
hsl(235, 16%, 39%)
HSB
hsb(235, 28%, 46%)
CMYK
cmyk(28%, 26%, 0%, 54%)
Oklch
oklch(46.6% 0.049 279.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D95959
59D9D9

Analogous

D95999
D95959
D99959

Triadic

D95959
59D959
5959D9

Split-Comp.

D95959
59D999
5999D9

Tetradic

D95959
99D959
59D9D9
9959D9

Contrast Matrix WCAG 2.1 Contrast

D95959
B5C5C9
F2F2F2
484A66
545775
—
2.1
Fail
3.4
AA Large
2.3
Fail
1.8
Fail
2.1
Fail
—
1.6
Fail
4.8
AA
3.9
AA Large
3.4
AA Large
1.6
Fail
—
7.7
AAA
6.3
AA
2.3
Fail
4.8
AA
7.7
AAA
—
1.2
Fail
1.8
Fail
3.9
AA Large
6.3
AA
1.2
Fail
—
White BG
3.8AA Large
1.8Fail
1.1Fail
8.6AAA
7.0AAA
Black BG
5.5AA
11.8AAA
18.8AAA
2.4Fail
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A059
BCBCC8
F2F2F2
49495F
55556E

Deuteranopia

A9B359
BBBAC8
F2F2F2
49495E
55556C

Tritanopia

D35959
B6C7C7
F2F2F2
485A59
546867

Achromatopsia

7F7F7F
C1C1C1
F2F2F2
4D4D4D
5A5A5A

Shades & Tints Shades & Tints

#D95959

Dark
Light

#B5C5C9

Dark
Light

#F2F2F2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d95959;
  --color-2: #b5c5c9;
  --color-3: #f2f2f2;
  --color-4: #484a66;
  --color-5: #545775;
}

SCSS

$color-1: #d95959;
$color-2: #b5c5c9;
$color-3: #f2f2f2;
$color-4: #484a66;
$color-5: #545775;

TAILWIND

colors: {
  'brand-1': '#d95959',
  'brand-2': '#b5c5c9',
  'brand-3': '#f2f2f2',
  'brand-4': '#484a66',
  'brand-5': '#545775',
}

RGB Array

[217, 89, 89], [181, 197, 201], [242, 242, 242], [72, 74, 102], [84, 87, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #D95959, #B5C5C9, #F2F2F2, #484A66, #545775 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: #d95959; --color-2: #b5c5c9; --color-3: #f2f2f2; --color-4: #484a66; --color-5: #545775. 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