← Back to Editor

#42BBA2 · #2297AE · #0D8A9C · #4A457F · #B6C2DD

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

#42BBA2

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#42BBA2
RGB
rgb(66, 187, 162)
HSL
hsl(168, 48%, 50%)
HSB
hsb(168, 65%, 73%)
CMYK
cmyk(65%, 0%, 13%, 27%)
Oklch
oklch(71.8% 0.113 176.5)

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

#2297AE

Lake Blue · LightSeaGreen · Mint Ice

HEX
#2297AE
RGB
rgb(34, 151, 174)
HSL
hsl(190, 67%, 41%)
HSB
hsb(190, 80%, 68%)
CMYK
cmyk(80%, 13%, 0%, 32%)
Oklch
oklch(62.5% 0.102 214.8)

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

#0D8A9C

Lake Blue · Teal · Mint Ice

HEX
#0D8A9C
RGB
rgb(13, 138, 156)
HSL
hsl(188, 85%, 33%)
HSB
hsb(188, 92%, 61%)
CMYK
cmyk(92%, 12%, 0%, 39%)
Oklch
oklch(58.2% 0.099 211.1)

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

#4A457F

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4A457F
RGB
rgb(74, 69, 127)
HSL
hsl(245, 30%, 38%)
HSB
hsb(245, 46%, 50%)
CMYK
cmyk(42%, 46%, 0%, 50%)
Oklch
oklch(42.4% 0.094 285.6)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#B6C2DD

Azure · LightSteelBlue · Cobalt Blue

HEX
#B6C2DD
RGB
rgb(182, 194, 221)
HSL
hsl(222, 36%, 79%)
HSB
hsb(222, 18%, 87%)
CMYK
cmyk(18%, 12%, 0%, 13%)
Oklch
oklch(81.3% 0.040 266.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

42BBA2
BD425B

Analogous

42BD67
42BBA2
4298BD

Triadic

42BBA2
A442BD
BDA442

Split-Comp.

42BBA2
BD4298
BD6742

Tetradic

42BBA2
6742BD
BD425B
98BD42

Contrast Matrix WCAG 2.1 Contrast

42BBA2
2297AE
0D8A9C
4A457F
B6C2DD
—
1.5
Fail
1.7
Fail
3.6
AA Large
1.3
Fail
1.5
Fail
—
1.2
Fail
2.5
Fail
1.9
Fail
1.7
Fail
1.2
Fail
—
2.1
Fail
2.3
Fail
3.6
AA Large
2.5
Fail
2.1
Fail
—
4.8
AA
1.3
Fail
1.9
Fail
2.3
Fail
4.8
AA
—
White BG
2.4Fail
3.4AA Large
4.1AA Large
8.6AAA
1.8Fail
Black BG
8.9AAA
6.1AA
5.1AA
2.4Fail
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7677A8
5556A8
434498
484871
BBBBD6

Deuteranopia

6F66AA
4E45A7
3C3397
48496E
BBBAD5

Tritanopia

48ADAE
28A4A3
139493
4A6663
B7D1D0

Achromatopsia

949494
777777
676767
4D4D4D
C1C1C1

Shades & Tints Shades & Tints

#42BBA2

Dark
Light

#2297AE

Dark
Light

#0D8A9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #42bba2;
  --color-2: #2297ae;
  --color-3: #0d8a9c;
  --color-4: #4a457f;
  --color-5: #b6c2dd;
}

SCSS

$color-1: #42bba2;
$color-2: #2297ae;
$color-3: #0d8a9c;
$color-4: #4a457f;
$color-5: #b6c2dd;

TAILWIND

colors: {
  'brand-1': '#42bba2',
  'brand-2': '#2297ae',
  'brand-3': '#0d8a9c',
  'brand-4': '#4a457f',
  'brand-5': '#b6c2dd',
}

RGB Array

[66, 187, 162], [34, 151, 174], [13, 138, 156], [74, 69, 127], [182, 194, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #42BBA2, #2297AE, #0D8A9C, #4A457F, #B6C2DD 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: #42bba2; --color-2: #2297ae; --color-3: #0d8a9c; --color-4: #4a457f; --color-5: #b6c2dd. 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