← Back to Editor

#121C40 · #27325E · #2F5471 · #69998B · #B1C9A5

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

#121C40

Indigo · MidnightBlue · Deep Sea Blue

HEX
#121C40
RGB
rgb(18, 28, 64)
HSL
hsl(227, 56%, 16%)
HSB
hsb(227, 72%, 25%)
CMYK
cmyk(72%, 56%, 0%, 75%)
Oklch
oklch(24.0% 0.070 269.0)

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

#27325E

Indigo · DarkSlateGray · Prussian Blue

HEX
#27325E
RGB
rgb(39, 50, 94)
HSL
hsl(228, 41%, 26%)
HSB
hsb(228, 59%, 37%)
CMYK
cmyk(59%, 47%, 0%, 63%)
Oklch
oklch(33.1% 0.079 271.0)

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

#2F5471

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#2F5471
RGB
rgb(47, 84, 113)
HSL
hsl(206, 41%, 31%)
HSB
hsb(206, 58%, 44%)
CMYK
cmyk(58%, 26%, 0%, 56%)
Oklch
oklch(43.1% 0.064 243.7)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#69998B

Mineral Blue · CadetBlue · Lake Green

HEX
#69998B
RGB
rgb(105, 153, 139)
HSL
hsl(162, 19%, 51%)
HSB
hsb(162, 31%, 60%)
CMYK
cmyk(31%, 0%, 9%, 40%)
Oklch
oklch(64.4% 0.056 174.3)

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

#B1C9A5

Celadon · Silver · Apple Green

HEX
#B1C9A5
RGB
rgb(177, 201, 165)
HSL
hsl(100, 25%, 72%)
HSB
hsb(100, 18%, 79%)
CMYK
cmyk(12%, 0%, 18%, 21%)
Oklch
oklch(80.8% 0.056 135.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

121C40
403612

Analogous

123340
121C40
1F1240

Triadic

121C40
40121C
1C4012

Split-Comp.

121C40
401F12
334012

Tetradic

121C40
401233
403612
12401F

Contrast Matrix WCAG 2.1 Contrast

121C40
27325E
2F5471
69998B
B1C9A5
—
1.3
Fail
2.1
Fail
5.2
AA
9.3
AAA
1.3
Fail
—
1.5
Fail
3.8
AA Large
6.9
AA
2.1
Fail
1.5
Fail
—
2.5
Fail
4.5
AA Large
5.2
AA
3.8
AA Large
2.5
Fail
—
1.8
Fail
9.3
AAA
6.9
AA
4.5
AA Large
1.8
Fail
—
White BG
16.6AAA
12.3AAA
8.0AAA
3.2AA Large
1.8Fail
Black BG
1.3Fail
1.7Fail
2.6Fail
6.5AA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

161637
2C2C53
3F3F6A
7E7E8E
BBBCAE

Deuteranopia

161535
2B2A51
3D3A68
7B778F
BAB8B0

Tritanopia

12302F
284B49
316463
6B9192
B2B5B6

Achromatopsia

1D1D1D
343434
4C4C4C
898989
BEBEBE

Shades & Tints Shades & Tints

#121C40

Dark
Light

#27325E

Dark
Light

#2F5471

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #121c40;
  --color-2: #27325e;
  --color-3: #2f5471;
  --color-4: #69998b;
  --color-5: #b1c9a5;
}

SCSS

$color-1: #121c40;
$color-2: #27325e;
$color-3: #2f5471;
$color-4: #69998b;
$color-5: #b1c9a5;

TAILWIND

colors: {
  'brand-1': '#121c40',
  'brand-2': '#27325e',
  'brand-3': '#2f5471',
  'brand-4': '#69998b',
  'brand-5': '#b1c9a5',
}

RGB Array

[18, 28, 64], [39, 50, 94], [47, 84, 113], [105, 153, 139], [177, 201, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #121C40, #27325E, #2F5471, #69998B, #B1C9A5 is ideal for: tech websites, dark mode UIs, game UIs, 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: #121c40; --color-2: #27325e; --color-3: #2f5471; --color-4: #69998b; --color-5: #b1c9a5. 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 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