← Back to Editor

#F5F6D6 · #A7CDBE · #4A7F91 · #3F4344 · #B0DDF0

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

#F5F6D6

Fresh Green · Beige · Lemon Cream

HEX
#F5F6D6
RGB
rgb(245, 246, 214)
HSL
hsl(62, 64%, 90%)
HSB
hsb(62, 13%, 96%)
CMYK
cmyk(0%, 0%, 13%, 4%)
Oklch
oklch(96.4% 0.042 108.6)

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

#A7CDBE

Jade · Silver · Apple Green

HEX
#A7CDBE
RGB
rgb(167, 205, 190)
HSL
hsl(156, 28%, 73%)
HSB
hsb(156, 19%, 80%)
CMYK
cmyk(19%, 0%, 7%, 20%)
Oklch
oklch(81.7% 0.045 169.2)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#4A7F91

Slate Blue · SteelBlue · Mint Ice

HEX
#4A7F91
RGB
rgb(74, 127, 145)
HSL
hsl(195, 32%, 43%)
HSB
hsb(195, 49%, 57%)
CMYK
cmyk(49%, 12%, 0%, 43%)
Oklch
oklch(56.7% 0.063 221.9)

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

#3F4344

Dark Cyan · DarkSlateGray · Charcoal

HEX
#3F4344
RGB
rgb(63, 67, 68)
HSL
hsl(192, 4%, 26%)
HSB
hsb(192, 7%, 27%)
CMYK
cmyk(7%, 1%, 0%, 73%)
Oklch
oklch(37.9% 0.006 214.4)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#B0DDF0

Sky Blue · LightBlue · Glacier Blue

HEX
#B0DDF0
RGB
rgb(176, 221, 240)
HSL
hsl(198, 68%, 82%)
HSB
hsb(198, 27%, 94%)
CMYK
cmyk(27%, 8%, 0%, 6%)
Oklch
oklch(87.2% 0.054 225.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F6D6
D6D5F6

Analogous

F6E7D5
F5F6D6
E4F6D5

Triadic

F5F6D6
D5F5F6
F6D5F5

Split-Comp.

F5F6D6
D5E4F6
E7D5F6

Tetradic

F5F6D6
D5F6E7
D6D5F6
F6D5E4

Contrast Matrix WCAG 2.1 Contrast

F5F6D6
A7CDBE
4A7F91
3F4344
B0DDF0
—
1.6
Fail
4.0
AA Large
9.1
AAA
1.3
Fail
1.6
Fail
—
2.6
Fail
5.8
AA
1.2
Fail
4.0
AA Large
2.6
Fail
—
2.3
Fail
3.1
AA Large
9.1
AAA
5.8
AA
2.3
Fail
—
6.9
AA
1.3
Fail
1.2
Fail
3.1
AA Large
6.9
AA
—
White BG
1.1Fail
1.7Fail
4.4AA Large
10.0AAA
1.5Fail
Black BG
19.0AAA
12.1AAA
4.7AA
2.1Fail
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5DE
B7B8C2
61618D
414144
C3C4EB

Deuteranopia

F5F5E0
B5B2C3
5E5A8C
414044
C1BEEA

Tritanopia

F5E4E5
A9C4C5
4D8988
3F4444
B2E8E7

Achromatopsia

F2F2F2
C0C0C0
717171
424242
D2D2D2

Shades & Tints Shades & Tints

#F5F6D6

Dark
Light

#A7CDBE

Dark
Light

#4A7F91

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f6d6;
  --color-2: #a7cdbe;
  --color-3: #4a7f91;
  --color-4: #3f4344;
  --color-5: #b0ddf0;
}

SCSS

$color-1: #f5f6d6;
$color-2: #a7cdbe;
$color-3: #4a7f91;
$color-4: #3f4344;
$color-5: #b0ddf0;

TAILWIND

colors: {
  'brand-1': '#f5f6d6',
  'brand-2': '#a7cdbe',
  'brand-3': '#4a7f91',
  'brand-4': '#3f4344',
  'brand-5': '#b0ddf0',
}

RGB Array

[245, 246, 214], [167, 205, 190], [74, 127, 145], [63, 67, 68], [176, 221, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F5F6D6, #A7CDBE, #4A7F91, #3F4344, #B0DDF0 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: #f5f6d6; --color-2: #a7cdbe; --color-3: #4a7f91; --color-4: #3f4344; --color-5: #b0ddf0. 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