← Back to Editor

#617E91 · #98ADB3 · #B1C0C4 · #C7C7C7 · #DED4D1

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#617E91

Slate Blue · SlateGray · Navy Blue

HEX
#617E91
RGB
rgb(97, 126, 145)
HSL
hsl(204, 20%, 47%)
HSB
hsb(204, 33%, 57%)
CMYK
cmyk(33%, 13%, 0%, 43%)
Oklch
oklch(57.8% 0.044 237.3)

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

#98ADB3

Sky Blue · DarkGray · Lake Green

HEX
#98ADB3
RGB
rgb(152, 173, 179)
HSL
hsl(193, 15%, 65%)
HSB
hsb(193, 15%, 70%)
CMYK
cmyk(15%, 3%, 0%, 30%)
Oklch
oklch(73.3% 0.025 216.8)

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

#B1C0C4

Sky Blue · Silver · Lake Green

HEX
#B1C0C4
RGB
rgb(177, 192, 196)
HSL
hsl(193, 14%, 73%)
HSB
hsb(193, 10%, 77%)
CMYK
cmyk(10%, 2%, 0%, 23%)
Oklch
oklch(79.7% 0.017 215.5)

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

#C7C7C7

Silver Gray · Silver · Pearl Gray

HEX
#C7C7C7
RGB
rgb(199, 199, 199)
HSL
hsl(0, 0%, 78%)
HSB
hsb(0, 0%, 78%)
CMYK
cmyk(0%, 0%, 0%, 22%)
Oklch
oklch(83.0% 0.000 89.9)

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

#DED4D1

Peach Pink · LightGray · Cherry Blossom

HEX
#DED4D1
RGB
rgb(222, 212, 209)
HSL
hsl(14, 16%, 85%)
HSB
hsb(14, 6%, 87%)
CMYK
cmyk(0%, 5%, 6%, 13%)
Oklch
oklch(87.7% 0.012 37.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

617E91
907360

Analogous

60908B
617E91
606590

Triadic

617E91
90607D
7D9060

Split-Comp.

617E91
906065
908B60

Tetradic

617E91
8B6090
907360
659060

Contrast Matrix WCAG 2.1 Contrast

617E91
98ADB3
B1C0C4
C7C7C7
DED4D1
—
1.8
Fail
2.3
Fail
2.5
Fail
2.9
Fail
1.8
Fail
—
1.3
Fail
1.4
Fail
1.6
Fail
2.3
Fail
1.3
Fail
—
1.1
Fail
1.3
Fail
2.5
Fail
1.4
Fail
1.1
Fail
—
1.2
Fail
2.9
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
White BG
4.3AA Large
2.3Fail
1.9Fail
1.7Fail
1.5Fail
Black BG
4.9AA
9.0AAA
11.2AAA
12.4AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E8C
A1A1B2
B7B8C3
C7C7C7
DADAD2

Deuteranopia

6C6A8B
A09EB1
B7B6C3
C7C7C7
DADBD2

Tritanopia

628988
99B0B0
B2C2C2
C7C7C7
DDD2D2

Achromatopsia

777777
A7A7A7
BCBCBC
C7C7C7
D7D7D7

Shades & Tints Shades & Tints

#617E91

Dark
Light

#98ADB3

Dark
Light

#B1C0C4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #617e91;
  --color-2: #98adb3;
  --color-3: #b1c0c4;
  --color-4: #c7c7c7;
  --color-5: #ded4d1;
}

SCSS

$color-1: #617e91;
$color-2: #98adb3;
$color-3: #b1c0c4;
$color-4: #c7c7c7;
$color-5: #ded4d1;

TAILWIND

colors: {
  'brand-1': '#617e91',
  'brand-2': '#98adb3',
  'brand-3': '#b1c0c4',
  'brand-4': '#c7c7c7',
  'brand-5': '#ded4d1',
}

RGB Array

[97, 126, 145], [152, 173, 179], [177, 192, 196], [199, 199, 199], [222, 212, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #617E91, #98ADB3, #B1C0C4, #C7C7C7, #DED4D1 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #617e91; --color-2: #98adb3; --color-3: #b1c0c4; --color-4: #c7c7c7; --color-5: #ded4d1. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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