← Back to Editor

#979CA5 · #BBBFD0 · #F6F6EB · #45616C · #F2C055

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

#979CA5

Ash · DarkGray · Silver Sand

HEX
#979CA5
RGB
rgb(151, 156, 165)
HSL
hsl(219, 7%, 62%)
HSB
hsb(219, 8%, 65%)
CMYK
cmyk(8%, 5%, 0%, 35%)
Oklch
oklch(69.2% 0.014 262.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BBBFD0

Azure · Silver · Cobalt Blue

HEX
#BBBFD0
RGB
rgb(187, 191, 208)
HSL
hsl(229, 18%, 77%)
HSB
hsb(229, 10%, 82%)
CMYK
cmyk(10%, 8%, 0%, 18%)
Oklch
oklch(80.7% 0.024 275.3)

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

#F6F6EB

Fresh Green · Linen · Lemon Cream

HEX
#F6F6EB
RGB
rgb(246, 246, 235)
HSL
hsl(60, 38%, 94%)
HSB
hsb(60, 4%, 96%)
CMYK
cmyk(0%, 0%, 4%, 4%)
Oklch
oklch(97.0% 0.015 106.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#45616C

Slate Blue · DimGray · Mint Ice

HEX
#45616C
RGB
rgb(69, 97, 108)
HSL
hsl(197, 22%, 35%)
HSB
hsb(197, 36%, 42%)
CMYK
cmyk(36%, 10%, 0%, 58%)
Oklch
oklch(47.5% 0.038 224.2)

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

#F2C055

Ginger · SandyBrown · Sunflower

HEX
#F2C055
RGB
rgb(242, 192, 85)
HSL
hsl(41, 86%, 64%)
HSB
hsb(41, 65%, 95%)
CMYK
cmyk(0%, 21%, 65%, 5%)
Oklch
oklch(83.3% 0.136 83.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

979CA5
A5A097

Analogous

97A3A5
979CA5
9997A5

Triadic

979CA5
A5979C
9CA597

Split-Comp.

979CA5
A59997
A3A597

Tetradic

979CA5
A597A3
A5A097
97A599

Contrast Matrix WCAG 2.1 Contrast

979CA5
BBBFD0
F6F6EB
45616C
F2C055
—
1.5
Fail
2.5
Fail
2.4
Fail
1.6
Fail
1.5
Fail
—
1.7
Fail
3.6
AA Large
1.1
Fail
2.5
Fail
1.7
Fail
—
6.1
AA
1.6
Fail
2.4
Fail
3.6
AA Large
6.1
AA
—
3.9
AA Large
1.6
Fail
1.1
Fail
1.6
Fail
3.9
AA Large
—
White BG
2.8Fail
1.8Fail
1.1Fail
6.6AA
1.7Fail
Black BG
7.6AAA
11.5AAA
19.3AAA
3.2AA Large
12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9999A3
BDBDCC
F6F6EE
515169
DCDC6F

Deuteranopia

9999A2
BDBCCB
F6F6EE
504D69
DFE375

Tritanopia

97A1A1
BBC9C8
F6F0F0
466767
EF8388

Achromatopsia

9C9C9C
C0C0C0
F5F5F5
5A5A5A
C3C3C3

Shades & Tints Shades & Tints

#979CA5

Dark
Light

#BBBFD0

Dark
Light

#F6F6EB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #979ca5;
  --color-2: #bbbfd0;
  --color-3: #f6f6eb;
  --color-4: #45616c;
  --color-5: #f2c055;
}

SCSS

$color-1: #979ca5;
$color-2: #bbbfd0;
$color-3: #f6f6eb;
$color-4: #45616c;
$color-5: #f2c055;

TAILWIND

colors: {
  'brand-1': '#979ca5',
  'brand-2': '#bbbfd0',
  'brand-3': '#f6f6eb',
  'brand-4': '#45616c',
  'brand-5': '#f2c055',
}

RGB Array

[151, 156, 165], [187, 191, 208], [246, 246, 235], [69, 97, 108], [242, 192, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #979CA5, #BBBFD0, #F6F6EB, #45616C, #F2C055 is ideal for: health products, baby brands, fresh-style blogs, 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: #979ca5; --color-2: #bbbfd0; --color-3: #f6f6eb; --color-4: #45616c; --color-5: #f2c055. 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 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