← Back to Editor

#626C83 · #888FA0 · #AEB3BE · #D4D6DC · #FAFAFA

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

WorkspaceReadingData Visualization

Color Details Color Details

#626C83

Indigo · DimGray · Navy Blue

HEX
#626C83
RGB
rgb(98, 108, 131)
HSL
hsl(222, 14%, 45%)
HSB
hsb(222, 25%, 51%)
CMYK
cmyk(25%, 18%, 0%, 49%)
Oklch
oklch(53.1% 0.038 266.6)

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

#888FA0

Azure · LightSlateGray · Navy Blue

HEX
#888FA0
RGB
rgb(136, 143, 160)
HSL
hsl(222, 11%, 58%)
HSB
hsb(222, 15%, 63%)
CMYK
cmyk(15%, 11%, 0%, 37%)
Oklch
oklch(65.0% 0.027 267.8)

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

#AEB3BE

Azure · Silver · Cobalt Blue

HEX
#AEB3BE
RGB
rgb(174, 179, 190)
HSL
hsl(221, 11%, 71%)
HSB
hsb(221, 8%, 75%)
CMYK
cmyk(8%, 6%, 0%, 25%)
Oklch
oklch(76.6% 0.017 266.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#D4D6DC

Azure · LightGray · Sky Blue

HEX
#D4D6DC
RGB
rgb(212, 214, 220)
HSL
hsl(225, 10%, 85%)
HSB
hsb(225, 4%, 86%)
CMYK
cmyk(4%, 3%, 0%, 14%)
Oklch
oklch(87.6% 0.008 271.3)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#FAFAFA

Moonlight White · Snow · Cloud White

HEX
#FAFAFA
RGB
rgb(250, 250, 250)
HSL
hsl(0, 0%, 98%)
HSB
hsb(0, 0%, 98%)
CMYK
cmyk(0%, 0%, 0%, 2%)
Oklch
oklch(98.5% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

626C83
837963

Analogous

637C83
626C83
696383

Triadic

626C83
83636C
6C8363

Split-Comp.

626C83
836963
7C8363

Tetradic

626C83
83637C
837963
638369

Contrast Matrix WCAG 2.1 Contrast

626C83
888FA0
AEB3BE
D4D6DC
FAFAFA
—
1.6
Fail
2.5
Fail
3.6
AA Large
5.0
AA
1.6
Fail
—
1.5
Fail
2.2
Fail
3.1
AA Large
2.5
Fail
1.5
Fail
—
1.4
Fail
2.0
Fail
3.6
AA Large
2.2
Fail
1.4
Fail
—
1.4
Fail
5.0
AA
3.1
AA Large
2.0
Fail
1.4
Fail
—
White BG
5.3AA
3.2AA Large
2.1Fail
1.5Fail
1.0Fail
Black BG
4.0AA Large
6.5AA
10.0AAA
14.5AAA
20.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66667D
8B8B9C
B0B0BB
D5D5DB
FAFAFA

Deuteranopia

66657C
8B8A9B
B0B0BB
D5D5DA
FAFAFA

Tritanopia

637978
889998
AEB9B9
D4D9D9
FAFAFA

Achromatopsia

6C6C6C
8F8F8F
B3B3B3
D6D6D6
FAFAFA

Shades & Tints Shades & Tints

#626C83

Dark
Light

#888FA0

Dark
Light

#AEB3BE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #626c83;
  --color-2: #888fa0;
  --color-3: #aeb3be;
  --color-4: #d4d6dc;
  --color-5: #fafafa;
}

SCSS

$color-1: #626c83;
$color-2: #888fa0;
$color-3: #aeb3be;
$color-4: #d4d6dc;
$color-5: #fafafa;

TAILWIND

colors: {
  'brand-1': '#626c83',
  'brand-2': '#888fa0',
  'brand-3': '#aeb3be',
  'brand-4': '#d4d6dc',
  'brand-5': '#fafafa',
}

RGB Array

[98, 108, 131], [136, 143, 160], [174, 179, 190], [212, 214, 220], [250, 250, 250]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #626C83, #888FA0, #AEB3BE, #D4D6DC, #FAFAFA is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #626c83; --color-2: #888fa0; --color-3: #aeb3be; --color-4: #d4d6dc; --color-5: #fafafa. 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. 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 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