← Back to Editor

#535866 · #5E6A75 · #B09480 · #D1B39D · #A6A89D

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

#535866

Indigo · DimGray · Prussian Blue

HEX
#535866
RGB
rgb(83, 88, 102)
HSL
hsl(224, 10%, 36%)
HSB
hsb(224, 19%, 40%)
CMYK
cmyk(19%, 14%, 0%, 60%)
Oklch
oklch(46.1% 0.024 269.9)

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

#5E6A75

Slate Blue · DimGray · Navy Blue

HEX
#5E6A75
RGB
rgb(94, 106, 117)
HSL
hsl(209, 11%, 41%)
HSB
hsb(209, 20%, 46%)
CMYK
cmyk(20%, 9%, 0%, 54%)
Oklch
oklch(51.8% 0.023 245.9)

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

#B09480

Tangerine · DarkGray · Warm Sun

HEX
#B09480
RGB
rgb(176, 148, 128)
HSL
hsl(25, 23%, 60%)
HSB
hsb(25, 27%, 69%)
CMYK
cmyk(0%, 16%, 27%, 31%)
Oklch
oklch(68.7% 0.044 57.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D1B39D

Apricot · Tan · Warm Sun

HEX
#D1B39D
RGB
rgb(209, 179, 157)
HSL
hsl(25, 36%, 72%)
HSB
hsb(25, 25%, 82%)
CMYK
cmyk(0%, 14%, 25%, 18%)
Oklch
oklch(78.7% 0.046 58.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#A6A89D

Ash · DarkGray · Silver Sand

HEX
#A6A89D
RGB
rgb(166, 168, 157)
HSL
hsl(71, 6%, 64%)
HSB
hsb(71, 7%, 66%)
CMYK
cmyk(1%, 0%, 7%, 34%)
Oklch
oklch(72.7% 0.016 115.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

535866
656053

Analogous

536165
535866
575365

Triadic

535866
655358
586553

Split-Comp.

535866
655753
616553

Tetradic

535866
655361
656053
536557

Contrast Matrix WCAG 2.1 Contrast

535866
5E6A75
B09480
D1B39D
A6A89D
—
1.3
Fail
2.5
Fail
3.6
AA Large
2.9
Fail
1.3
Fail
—
1.9
Fail
2.8
Fail
2.3
Fail
2.5
Fail
1.9
Fail
—
1.4
Fail
1.2
Fail
3.6
AA Large
2.8
Fail
1.4
Fail
—
1.2
Fail
2.9
Fail
2.3
Fail
1.2
Fail
1.2
Fail
—
White BG
7.1AAA
5.5AA
2.8Fail
2.0Fail
2.4Fail
Black BG
3.0Fail
3.8AA Large
7.4AAA
10.6AAA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

555563
636372
A4A485
C4C4A2
A7A7A0

Deuteranopia

555562
636272
A6A886
C6C8A4
A7A7A0

Tritanopia

53605F
5F7070
AF898A
CFA7A7
A6A2A2

Achromatopsia

585858
686868
9A9A9A
B9B9B9
A6A6A6

Shades & Tints Shades & Tints

#535866

Dark
Light

#5E6A75

Dark
Light

#B09480

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #535866;
  --color-2: #5e6a75;
  --color-3: #b09480;
  --color-4: #d1b39d;
  --color-5: #a6a89d;
}

SCSS

$color-1: #535866;
$color-2: #5e6a75;
$color-3: #b09480;
$color-4: #d1b39d;
$color-5: #a6a89d;

TAILWIND

colors: {
  'brand-1': '#535866',
  'brand-2': '#5e6a75',
  'brand-3': '#b09480',
  'brand-4': '#d1b39d',
  'brand-5': '#a6a89d',
}

RGB Array

[83, 88, 102], [94, 106, 117], [176, 148, 128], [209, 179, 157], [166, 168, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #535866, #5E6A75, #B09480, #D1B39D, #A6A89D 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: #535866; --color-2: #5e6a75; --color-3: #b09480; --color-4: #d1b39d; --color-5: #a6a89d. 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