← Back to Editor

#456696 · #657CA3 · #8C8C8C · #B3A784 · #C7B685

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 Library

Color Details Color Details

#456696

Indigo · SteelBlue · Navy Blue

HEX
#456696
RGB
rgb(69, 102, 150)
HSL
hsl(216, 37%, 43%)
HSB
hsb(216, 54%, 59%)
CMYK
cmyk(54%, 32%, 0%, 41%)
Oklch
oklch(50.7% 0.086 257.7)

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

#657CA3

Azure · SlateGray · Navy Blue

HEX
#657CA3
RGB
rgb(101, 124, 163)
HSL
hsl(218, 25%, 52%)
HSB
hsb(218, 38%, 64%)
CMYK
cmyk(38%, 24%, 0%, 36%)
Oklch
oklch(58.4% 0.066 260.8)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#8C8C8C

Ash · Gray · Warm Gray

HEX
#8C8C8C
RGB
rgb(140, 140, 140)
HSL
hsl(0, 0%, 55%)
HSB
hsb(0, 0%, 55%)
CMYK
cmyk(0%, 0%, 0%, 45%)
Oklch
oklch(64.0% 0.000 89.9)

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

#B3A784

Ginger · Tan · Sunflower

HEX
#B3A784
RGB
rgb(179, 167, 132)
HSL
hsl(45, 24%, 61%)
HSB
hsb(45, 26%, 70%)
CMYK
cmyk(0%, 7%, 26%, 30%)
Oklch
oklch(73.0% 0.050 91.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C7B685

Ginger · Tan · Sunflower

HEX
#C7B685
RGB
rgb(199, 182, 133)
HSL
hsl(45, 37%, 65%)
HSB
hsb(45, 33%, 78%)
CMYK
cmyk(0%, 9%, 33%, 22%)
Oklch
oklch(77.9% 0.068 91.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

456696
967645

Analogous

458E96
456696
4D4596

Triadic

456696
964566
669645

Split-Comp.

456696
964D45
8E9645

Tetradic

456696
96458E
967645
45964D

Contrast Matrix WCAG 2.1 Contrast

456696
657CA3
8C8C8C
B3A784
C7B685
—
1.4
Fail
1.7
Fail
2.4
Fail
2.9
Fail
1.4
Fail
—
1.3
Fail
1.8
Fail
2.1
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
1.7
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.2
Fail
2.9
Fail
2.1
Fail
1.7
Fail
1.2
Fail
—
White BG
5.8AA
4.2AA Large
3.4AA Large
2.4Fail
2.0Fail
Black BG
3.6AA Large
5.0AA
6.2AA
8.8AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

53548A
6F6F9A
8C8C8C
AEAE8C
C0BF91

Deuteranopia

514F88
6E6C97
8C8C8C
AFAF8F
C1C294

Tritanopia

47817F
669290
8C8C8C
B29395
C69A9C

Achromatopsia

626262
7A7A7A
8C8C8C
A7A7A7
B5B5B5

Shades & Tints Shades & Tints

#456696

Dark
Light

#657CA3

Dark
Light

#8C8C8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #456696;
  --color-2: #657ca3;
  --color-3: #8c8c8c;
  --color-4: #b3a784;
  --color-5: #c7b685;
}

SCSS

$color-1: #456696;
$color-2: #657ca3;
$color-3: #8c8c8c;
$color-4: #b3a784;
$color-5: #c7b685;

TAILWIND

colors: {
  'brand-1': '#456696',
  'brand-2': '#657ca3',
  'brand-3': '#8c8c8c',
  'brand-4': '#b3a784',
  'brand-5': '#c7b685',
}

RGB Array

[69, 102, 150], [101, 124, 163], [140, 140, 140], [179, 167, 132], [199, 182, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #456696, #657CA3, #8C8C8C, #B3A784, #C7B685 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #456696; --color-2: #657ca3; --color-3: #8c8c8c; --color-4: #b3a784; --color-5: #c7b685. 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. 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