← Back to Editor

#685EC6 · #1C1380 · #08033D · #390C66 · #6B1E85

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

#685EC6

Deep Indigo · SlateBlue · Navy Blue

HEX
#685EC6
RGB
rgb(104, 94, 198)
HSL
hsl(246, 48%, 57%)
HSB
hsb(246, 53%, 78%)
CMYK
cmyk(47%, 53%, 0%, 22%)
Oklch
oklch(54.4% 0.156 284.3)

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

#1C1380

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#1C1380
RGB
rgb(28, 19, 128)
HSL
hsl(245, 74%, 29%)
HSB
hsb(245, 85%, 50%)
CMYK
cmyk(78%, 85%, 0%, 50%)
Oklch
oklch(30.1% 0.169 273.2)

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

#08033D

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#08033D
RGB
rgb(8, 3, 61)
HSL
hsl(245, 91%, 13%)
HSB
hsb(245, 95%, 24%)
CMYK
cmyk(87%, 95%, 0%, 76%)
Oklch
oklch(17.7% 0.104 273.3)

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

#390C66

Royal Purple · MidnightBlue · Eggplant

HEX
#390C66
RGB
rgb(57, 12, 102)
HSL
hsl(270, 79%, 22%)
HSB
hsb(270, 88%, 40%)
CMYK
cmyk(44%, 88%, 0%, 60%)
Oklch
oklch(29.4% 0.141 299.8)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#6B1E85

Royal Purple · Purple · Eggplant

HEX
#6B1E85
RGB
rgb(107, 30, 133)
HSL
hsl(285, 63%, 32%)
HSB
hsb(285, 77%, 52%)
CMYK
cmyk(20%, 77%, 0%, 48%)
Oklch
oklch(40.8% 0.168 315.9)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

685EC6
BBC65D

Analogous

5D87C6
685EC6
9C5DC6

Triadic

685EC6
C6675D
5DC667

Split-Comp.

685EC6
C69C5D
87C65D

Tetradic

685EC6
C65D87
BBC65D
5DC69C

Contrast Matrix WCAG 2.1 Contrast

685EC6
1C1380
08033D
390C66
6B1E85
—
2.8
Fail
3.7
AA Large
2.8
Fail
1.9
Fail
2.8
Fail
—
1.3
Fail
1.0
Fail
1.5
Fail
3.7
AA Large
1.3
Fail
—
1.3
Fail
2.0
Fail
2.8
Fail
1.0
Fail
1.3
Fail
—
1.5
Fail
1.9
Fail
1.5
Fail
2.0
Fail
1.5
Fail
—
White BG
5.2AA
14.4AAA
19.3AAA
14.8AAA
9.8AAA
Black BG
4.0AA Large
1.5Fail
1.1Fail
1.4Fail
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6464AD
181866
06062F
262550
4A496C

Deuteranopia

6465A7
19195F
06072C
282C4B
4E5466

Tritanopia

689995
1C514C
082421
373F3B
675854

Achromatopsia

6D6D6D
222222
0B0B0B
242424
414141

Shades & Tints Shades & Tints

#685EC6

Dark
Light

#1C1380

Dark
Light

#08033D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #685ec6;
  --color-2: #1c1380;
  --color-3: #08033d;
  --color-4: #390c66;
  --color-5: #6b1e85;
}

SCSS

$color-1: #685ec6;
$color-2: #1c1380;
$color-3: #08033d;
$color-4: #390c66;
$color-5: #6b1e85;

TAILWIND

colors: {
  'brand-1': '#685ec6',
  'brand-2': '#1c1380',
  'brand-3': '#08033d',
  'brand-4': '#390c66',
  'brand-5': '#6b1e85',
}

RGB Array

[104, 94, 198], [28, 19, 128], [8, 3, 61], [57, 12, 102], [107, 30, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #685EC6, #1C1380, #08033D, #390C66, #6B1E85 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: #685ec6; --color-2: #1c1380; --color-3: #08033d; --color-4: #390c66; --color-5: #6b1e85. 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