← Back to Editor

#8E6312 · #989BB3 · #5E503F · #7B7D6B · #1B5154

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

#8E6312

Ochre · Sienna · Amber Brown

HEX
#8E6312
RGB
rgb(142, 99, 18)
HSL
hsl(39, 78%, 31%)
HSB
hsb(39, 87%, 56%)
CMYK
cmyk(0%, 30%, 87%, 44%)
Oklch
oklch(53.2% 0.105 77.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#989BB3

Azure · DarkGray · Cobalt Blue

HEX
#989BB3
RGB
rgb(152, 155, 179)
HSL
hsl(233, 15%, 65%)
HSB
hsb(233, 15%, 70%)
CMYK
cmyk(15%, 13%, 0%, 30%)
Oklch
oklch(69.5% 0.035 279.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#5E503F

Ochre · DarkOliveGreen · Amber Brown

HEX
#5E503F
RGB
rgb(94, 80, 63)
HSL
hsl(33, 20%, 31%)
HSB
hsb(33, 33%, 37%)
CMYK
cmyk(0%, 15%, 33%, 63%)
Oklch
oklch(44.0% 0.032 72.2)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#7B7D6B

Autumn Sage · Gray · Warm Gray

HEX
#7B7D6B
RGB
rgb(123, 125, 107)
HSL
hsl(67, 8%, 45%)
HSB
hsb(67, 14%, 49%)
CMYK
cmyk(2%, 0%, 14%, 51%)
Oklch
oklch(58.3% 0.027 112.4)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#1B5154

Lake Blue · DarkSlateGray · Peacock Green

HEX
#1B5154
RGB
rgb(27, 81, 84)
HSL
hsl(183, 51%, 22%)
HSB
hsb(183, 68%, 33%)
CMYK
cmyk(68%, 4%, 0%, 67%)
Oklch
oklch(40.1% 0.056 200.3)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E6312
113D8D

Analogous

8D2411
8E6312
7A8D11

Triadic

8E6312
118D62
62118D

Split-Comp.

8E6312
117A8D
24118D

Tetradic

8E6312
118D24
113D8D
8D117A

Contrast Matrix WCAG 2.1 Contrast

8E6312
989BB3
5E503F
7B7D6B
1B5154
—
1.9
Fail
1.5
Fail
1.3
Fail
1.7
Fail
1.9
Fail
—
2.8
Fail
1.5
Fail
3.3
AA Large
1.5
Fail
2.8
Fail
—
1.9
Fail
1.1
Fail
1.3
Fail
1.5
Fail
1.9
Fail
—
2.1
Fail
1.7
Fail
3.3
AA Large
1.1
Fail
2.1
Fail
—
White BG
5.3AA
2.7Fail
7.8AAA
4.2AA Large
8.9AAA
Black BG
3.9AA Large
7.7AAA
2.7Fail
5.0AA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B26
9999AD
585843
7C7C6F
323353

Deuteranopia

7E812A
9999AC
595A44
7C7C70
2F2B53

Tritanopia

8C3538
98A9A8
5D4647
7B7374
1E5353

Achromatopsia

676767
9D9D9D
525252
7A7A7A
414141

Shades & Tints Shades & Tints

#8E6312

Dark
Light

#989BB3

Dark
Light

#5E503F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e6312;
  --color-2: #989bb3;
  --color-3: #5e503f;
  --color-4: #7b7d6b;
  --color-5: #1b5154;
}

SCSS

$color-1: #8e6312;
$color-2: #989bb3;
$color-3: #5e503f;
$color-4: #7b7d6b;
$color-5: #1b5154;

TAILWIND

colors: {
  'brand-1': '#8e6312',
  'brand-2': '#989bb3',
  'brand-3': '#5e503f',
  'brand-4': '#7b7d6b',
  'brand-5': '#1b5154',
}

RGB Array

[142, 99, 18], [152, 155, 179], [94, 80, 63], [123, 125, 107], [27, 81, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #8E6312, #989BB3, #5E503F, #7B7D6B, #1B5154 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #8e6312; --color-2: #989bb3; --color-3: #5e503f; --color-4: #7b7d6b; --color-5: #1b5154. 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 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