← Back to Editor

#001021 · #004A53 · #368986 · #00D0B2 · #6CF1C2

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#001021

Indigo · Black · Deep Sea Blue

HEX
#001021
RGB
rgb(0, 16, 33)
HSL
hsl(211, 100%, 6%)
HSB
hsb(211, 100%, 13%)
CMYK
cmyk(100%, 52%, 0%, 87%)
Oklch
oklch(16.8% 0.044 247.1)

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

#004A53

Lake Blue · DarkSlateGray · Peacock Green

HEX
#004A53
RGB
rgb(0, 74, 83)
HSL
hsl(187, 100%, 16%)
HSB
hsb(187, 100%, 33%)
CMYK
cmyk(100%, 11%, 0%, 67%)
Oklch
oklch(37.4% 0.064 208.7)

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

#368986

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#368986
RGB
rgb(54, 137, 134)
HSL
hsl(178, 43%, 37%)
HSB
hsb(178, 61%, 54%)
CMYK
cmyk(61%, 0%, 2%, 46%)
Oklch
oklch(57.9% 0.080 191.9)

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

#00D0B2

Mineral Blue · DarkTurquoise · Mint Ice

HEX
#00D0B2
RGB
rgb(0, 208, 178)
HSL
hsl(171, 100%, 41%)
HSB
hsb(171, 100%, 82%)
CMYK
cmyk(100%, 0%, 14%, 18%)
Oklch
oklch(76.7% 0.142 177.3)

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

#6CF1C2

Jade · MediumAquaMarine · Apple Green

HEX
#6CF1C2
RGB
rgb(108, 241, 194)
HSL
hsl(159, 83%, 68%)
HSB
hsb(159, 55%, 95%)
CMYK
cmyk(55%, 0%, 20%, 5%)
Oklch
oklch(87.1% 0.136 167.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

001021
1F1000

Analogous

001E1F
001021
01001F

Triadic

001021
1F000F
0F1F00

Split-Comp.

001021
1F0100
1E1F00

Tetradic

001021
1F001E
1F1000
001F01

Contrast Matrix WCAG 2.1 Contrast

001021
004A53
368986
00D0B2
6CF1C2
—
1.9
Fail
4.6
AA
9.7
AAA
13.7
AAA
1.9
Fail
—
2.4
Fail
5.1
AA
7.1
AAA
4.6
AA
2.4
Fail
—
2.1
Fail
3.0
Fail
9.7
AAA
5.1
AA
2.1
Fail
—
1.4
Fail
13.7
AAA
7.1
AAA
3.0
Fail
1.4
Fail
—
White BG
19.2AAA
10.0AAA
4.1AA Large
2.0Fail
1.4Fail
Black BG
1.1Fail
2.1Fail
5.1AA
10.7AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

07071D
202151
5A5B87
5A5CB9
A6A7CD

Deuteranopia

06051C
1C1650
554F87
4E3EBB
9E94D0

Tritanopia

011A19
044F4F
3A8787
0ABFC0
73D6D8

Achromatopsia

0D0D0D
353535
707070
8E8E8E
C4C4C4

Shades & Tints Shades & Tints

#001021

Dark
Light

#004A53

Dark
Light

#368986

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #001021;
  --color-2: #004a53;
  --color-3: #368986;
  --color-4: #00d0b2;
  --color-5: #6cf1c2;
}

SCSS

$color-1: #001021;
$color-2: #004a53;
$color-3: #368986;
$color-4: #00d0b2;
$color-5: #6cf1c2;

TAILWIND

colors: {
  'brand-1': '#001021',
  'brand-2': '#004a53',
  'brand-3': '#368986',
  'brand-4': '#00d0b2',
  'brand-5': '#6cf1c2',
}

RGB Array

[0, 16, 33], [0, 74, 83], [54, 137, 134], [0, 208, 178], [108, 241, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #001021, #004A53, #368986, #00D0B2, #6CF1C2 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #001021; --color-2: #004a53; --color-3: #368986; --color-4: #00d0b2; --color-5: #6cf1c2. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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