← Back to Editor

#746E7E · #7E17FC · #5E5D5E · #7303FC · #877E91

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 Library

Color Details Color Details

#746E7E

Ink Gray · Gray · Warm Gray

HEX
#746E7E
RGB
rgb(116, 110, 126)
HSL
hsl(263, 7%, 46%)
HSB
hsb(263, 13%, 49%)
CMYK
cmyk(8%, 13%, 0%, 51%)
Oklch
oklch(54.9% 0.025 302.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#7E17FC

Deep Indigo · DarkViolet · Violet

HEX
#7E17FC
RGB
rgb(126, 23, 252)
HSL
hsl(267, 97%, 54%)
HSB
hsb(267, 91%, 99%)
CMYK
cmyk(50%, 91%, 0%, 1%)
Oklch
oklch(53.2% 0.284 293.3)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#5E5D5E

Ink Gray · DimGray · Charcoal

HEX
#5E5D5E
RGB
rgb(94, 93, 94)
HSL
hsl(300, 1%, 37%)
HSB
hsb(300, 1%, 37%)
CMYK
cmyk(0%, 1%, 0%, 63%)
Oklch
oklch(48.0% 0.002 325.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#7303FC

Deep Indigo · DarkViolet · Violet

HEX
#7303FC
RGB
rgb(115, 3, 252)
HSL
hsl(267, 98%, 50%)
HSB
hsb(267, 99%, 99%)
CMYK
cmyk(54%, 99%, 0%, 1%)
Oklch
oklch(51.4% 0.290 290.1)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#877E91

Deep Indigo · Gray · Warm Gray

HEX
#877E91
RGB
rgb(135, 126, 145)
HSL
hsl(268, 8%, 53%)
HSB
hsb(268, 13%, 57%)
CMYK
cmyk(7%, 13%, 0%, 43%)
Oklch
oklch(60.7% 0.030 306.8)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

746E7E
777E6D

Analogous

6D6F7E
746E7E
7C6D7E

Triadic

746E7E
7E736D
6D7E73

Split-Comp.

746E7E
7E7C6D
6F7E6D

Tetradic

746E7E
7E6D6F
777E6D
6D7E7C

Contrast Matrix WCAG 2.1 Contrast

746E7E
7E17FC
5E5D5E
7303FC
877E91
—
1.3
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.3
Fail
—
1.1
Fail
1.1
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
1.0
Fail
1.7
Fail
1.4
Fail
1.1
Fail
1.0
Fail
—
1.7
Fail
1.3
Fail
1.6
Fail
1.7
Fail
1.7
Fail
—
White BG
4.9AA
6.1AA
6.6AA
6.7AA
3.9AA Large
Black BG
4.3AA Large
3.4AA Large
3.2AA Large
3.1AA Large
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

71717A
5150C5
5E5E5E
4341C0
83838C

Deuteranopia

727279
575FB7
5E5E5E
4951B1
84848B

Tritanopia

747776
79998F
5E5E5E
6D9086
878988

Achromatopsia

727272
505050
5D5D5D
414141
838383

Shades & Tints Shades & Tints

#746E7E

Dark
Light

#7E17FC

Dark
Light

#5E5D5E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #746e7e;
  --color-2: #7e17fc;
  --color-3: #5e5d5e;
  --color-4: #7303fc;
  --color-5: #877e91;
}

SCSS

$color-1: #746e7e;
$color-2: #7e17fc;
$color-3: #5e5d5e;
$color-4: #7303fc;
$color-5: #877e91;

TAILWIND

colors: {
  'brand-1': '#746e7e',
  'brand-2': '#7e17fc',
  'brand-3': '#5e5d5e',
  'brand-4': '#7303fc',
  'brand-5': '#877e91',
}

RGB Array

[116, 110, 126], [126, 23, 252], [94, 93, 94], [115, 3, 252], [135, 126, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #746E7E, #7E17FC, #5E5D5E, #7303FC, #877E91 is ideal for: corporate websites, product showcases, portfolios. 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: #746e7e; --color-2: #7e17fc; --color-3: #5e5d5e; --color-4: #7303fc; --color-5: #877e91. 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. 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