← Back to Editor

#F5F5F5 · #B3F2C8 · #82EDDA · #4FDBDB · #31A7C4

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

#F5F5F5

Moonlight White · SeaShell · Cloud White

HEX
#F5F5F5
RGB
rgb(245, 245, 245)
HSL
hsl(0, 0%, 96%)
HSB
hsb(0, 0%, 96%)
CMYK
cmyk(0%, 0%, 0%, 4%)
Oklch
oklch(97.0% 0.000 89.9)

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

#B3F2C8

Emerald · LightBlue · Mint Green

HEX
#B3F2C8
RGB
rgb(179, 242, 200)
HSL
hsl(140, 71%, 83%)
HSB
hsb(140, 26%, 95%)
CMYK
cmyk(26%, 0%, 17%, 5%)
Oklch
oklch(90.7% 0.086 155.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#82EDDA

Jade · SkyBlue · Lake Green

HEX
#82EDDA
RGB
rgb(130, 237, 218)
HSL
hsl(169, 75%, 72%)
HSB
hsb(169, 45%, 93%)
CMYK
cmyk(45%, 0%, 8%, 7%)
Oklch
oklch(87.6% 0.104 180.9)

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

#4FDBDB

Lake Blue · Turquoise · Lake Green

HEX
#4FDBDB
RGB
rgb(79, 219, 219)
HSL
hsl(180, 66%, 58%)
HSB
hsb(180, 64%, 86%)
CMYK
cmyk(64%, 0%, 0%, 14%)
Oklch
oklch(81.7% 0.118 195.1)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#31A7C4

Lake Blue · LightSeaGreen · Mint Ice

HEX
#31A7C4
RGB
rgb(49, 167, 196)
HSL
hsl(192, 60%, 48%)
HSB
hsb(192, 75%, 77%)
CMYK
cmyk(75%, 15%, 0%, 23%)
Oklch
oklch(67.7% 0.109 218.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5F5F5
F5F5F5

Analogous

F5F5F5
F5F5F5
F5F5F5

Triadic

F5F5F5
F5F5F5
F5F5F5

Split-Comp.

F5F5F5
F5F5F5
F5F5F5

Tetradic

F5F5F5
F5F5F5
F5F5F5
F5F5F5

Contrast Matrix WCAG 2.1 Contrast

F5F5F5
B3F2C8
82EDDA
4FDBDB
31A7C4
—
1.2
Fail
1.3
Fail
1.5
Fail
2.6
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
2.2
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
2.0
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.7
Fail
2.6
Fail
2.2
Fail
2.0
Fail
1.7
Fail
—
White BG
1.1Fail
1.3Fail
1.4Fail
1.7Fail
2.8Fail
Black BG
19.3AAA
16.5AAA
15.1AAA
12.5AAA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5F5
CECFD2
B0B1DF
8C8DDB
6465BD

Deuteranopia

F5F5F5
CBC6D5
AAA2E0
8479DB
5D54BB

Tritanopia

F5F5F5
B6DADC
87E2E3
56DBDB
37B7B6

Achromatopsia

F5F5F5
DADADA
CBCBCB
B1B1B1
878787

Shades & Tints Shades & Tints

#F5F5F5

Dark
Light

#B3F2C8

Dark
Light

#82EDDA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5f5f5;
  --color-2: #b3f2c8;
  --color-3: #82edda;
  --color-4: #4fdbdb;
  --color-5: #31a7c4;
}

SCSS

$color-1: #f5f5f5;
$color-2: #b3f2c8;
$color-3: #82edda;
$color-4: #4fdbdb;
$color-5: #31a7c4;

TAILWIND

colors: {
  'brand-1': '#f5f5f5',
  'brand-2': '#b3f2c8',
  'brand-3': '#82edda',
  'brand-4': '#4fdbdb',
  'brand-5': '#31a7c4',
}

RGB Array

[245, 245, 245], [179, 242, 200], [130, 237, 218], [79, 219, 219], [49, 167, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F5F5F5, #B3F2C8, #82EDDA, #4FDBDB, #31A7C4 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: #f5f5f5; --color-2: #b3f2c8; --color-3: #82edda; --color-4: #4fdbdb; --color-5: #31a7c4. 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