← Back to Editor

#031229 · #30314F · #495168 · #AC98A1 · #BAB7B2

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#031229

Indigo · Black · Deep Sea Blue

HEX
#031229
RGB
rgb(3, 18, 41)
HSL
hsl(216, 86%, 9%)
HSB
hsb(216, 93%, 16%)
CMYK
cmyk(93%, 56%, 0%, 84%)
Oklch
oklch(18.4% 0.052 256.8)

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

#30314F

Indigo · DarkSlateGray · Prussian Blue

HEX
#30314F
RGB
rgb(48, 49, 79)
HSL
hsl(238, 24%, 25%)
HSB
hsb(238, 39%, 31%)
CMYK
cmyk(39%, 38%, 0%, 69%)
Oklch
oklch(32.7% 0.053 281.6)

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

#495168

Indigo · DarkSlateGray · Prussian Blue

HEX
#495168
RGB
rgb(73, 81, 104)
HSL
hsl(225, 18%, 35%)
HSB
hsb(225, 30%, 41%)
CMYK
cmyk(30%, 22%, 0%, 59%)
Oklch
oklch(43.7% 0.039 269.8)

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

#AC98A1

Rouge · DarkGray · Rose Pink

HEX
#AC98A1
RGB
rgb(172, 152, 161)
HSL
hsl(333, 11%, 64%)
HSB
hsb(333, 12%, 67%)
CMYK
cmyk(0%, 12%, 6%, 33%)
Oklch
oklch(70.0% 0.027 348.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#BAB7B2

Silver Gray · Silver · Pearl Gray

HEX
#BAB7B2
RGB
rgb(186, 183, 178)
HSL
hsl(38, 5%, 71%)
HSB
hsb(38, 4%, 73%)
CMYK
cmyk(0%, 2%, 4%, 27%)
Oklch
oklch(78.0% 0.008 80.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

031229
2B1B03

Analogous

03272B
031229
07032B

Triadic

031229
2B0313
132B03

Split-Comp.

031229
2B0703
272B03

Tetradic

031229
2B0327
2B1B03
032B07

Contrast Matrix WCAG 2.1 Contrast

031229
30314F
495168
AC98A1
BAB7B2
—
1.5
Fail
2.4
Fail
6.9
AA
9.4
AAA
1.5
Fail
—
1.6
Fail
4.6
AA
6.3
AA
2.4
Fail
1.6
Fail
—
2.9
Fail
3.9
AA Large
6.9
AA
4.6
AA
2.9
Fail
—
1.4
Fail
9.4
AAA
6.3
AA
3.9
AA Large
1.4
Fail
—
White BG
18.7AAA
12.5AAA
7.9AAA
2.7Fail
2.0Fail
Black BG
1.1Fail
1.7Fail
2.7Fail
7.8AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

090A23
303048
4C4D62
A3A39F
B9B9B3

Deuteranopia

090722
303046
4C4B61
A5A69E
B9B9B4

Tritanopia

041F1E
304241
495E5D
AB9D9D
BAB4B4

Achromatopsia

101010
343434
515151
9F9F9F
B7B7B7

Shades & Tints Shades & Tints

#031229

Dark
Light

#30314F

Dark
Light

#495168

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #031229;
  --color-2: #30314f;
  --color-3: #495168;
  --color-4: #ac98a1;
  --color-5: #bab7b2;
}

SCSS

$color-1: #031229;
$color-2: #30314f;
$color-3: #495168;
$color-4: #ac98a1;
$color-5: #bab7b2;

TAILWIND

colors: {
  'brand-1': '#031229',
  'brand-2': '#30314f',
  'brand-3': '#495168',
  'brand-4': '#ac98a1',
  'brand-5': '#bab7b2',
}

RGB Array

[3, 18, 41], [48, 49, 79], [73, 81, 104], [172, 152, 161], [186, 183, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #031229, #30314F, #495168, #AC98A1, #BAB7B2 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #031229; --color-2: #30314f; --color-3: #495168; --color-4: #ac98a1; --color-5: #bab7b2. 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. Restrained colors convey professionalism and trust. 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