← Back to Editor

#966930 · #AA791A · #8E8F93 · #7F7E7C · #4272A0

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

#966930

Ochre · Sienna · Amber Brown

HEX
#966930
RGB
rgb(150, 105, 48)
HSL
hsl(34, 52%, 39%)
HSB
hsb(34, 68%, 59%)
CMYK
cmyk(0%, 30%, 68%, 41%)
Oklch
oklch(55.6% 0.093 70.1)

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

#AA791A

Ochre · DarkGoldenRod · Honey Gold

HEX
#AA791A
RGB
rgb(170, 121, 26)
HSL
hsl(40, 73%, 38%)
HSB
hsb(40, 85%, 67%)
CMYK
cmyk(0%, 29%, 85%, 33%)
Oklch
oklch(61.0% 0.119 78.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#8E8F93

Ash · LightSlateGray · Silver Sand

HEX
#8E8F93
RGB
rgb(142, 143, 147)
HSL
hsl(228, 2%, 57%)
HSB
hsb(228, 3%, 58%)
CMYK
cmyk(3%, 3%, 0%, 42%)
Oklch
oklch(65.0% 0.006 274.9)

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

#7F7E7C

Ink Gray · Gray · Warm Gray

HEX
#7F7E7C
RGB
rgb(127, 126, 124)
HSL
hsl(40, 1%, 49%)
HSB
hsb(40, 2%, 50%)
CMYK
cmyk(0%, 1%, 2%, 50%)
Oklch
oklch(59.3% 0.003 84.6)

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

#4272A0

Slate Blue · SteelBlue · Navy Blue

HEX
#4272A0
RGB
rgb(66, 114, 160)
HSL
hsl(209, 42%, 44%)
HSB
hsb(209, 59%, 63%)
CMYK
cmyk(59%, 29%, 0%, 37%)
Oklch
oklch(53.8% 0.090 248.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

966930
305D97

Analogous

973730
966930
909730

Triadic

966930
30976A
6A3097

Split-Comp.

966930
309097
373097

Tetradic

966930
309737
305D97
973090

Contrast Matrix WCAG 2.1 Contrast

966930
AA791A
8E8F93
7F7E7C
4272A0
—
1.3
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
1.2
Fail
1.1
Fail
1.3
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
1.6
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
1.2
Fail
1.1
Fail
1.3
Fail
1.6
Fail
1.2
Fail
—
White BG
4.8AA
3.8AA Large
3.2AA Large
4.1AA Large
5.1AA
Black BG
4.4AA Large
5.5AA
6.5AA
5.2AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

83823E
959431
8E8E92
7F7F7C
575795

Deuteranopia

858941
989B37
8E8E92
7F7F7D
545092

Tritanopia

94494B
A84347
8E9191
7F7D7D
448C8A

Achromatopsia

707070
7D7D7D
8F8F8F
7E7E7E
696969

Shades & Tints Shades & Tints

#966930

Dark
Light

#AA791A

Dark
Light

#8E8F93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #966930;
  --color-2: #aa791a;
  --color-3: #8e8f93;
  --color-4: #7f7e7c;
  --color-5: #4272a0;
}

SCSS

$color-1: #966930;
$color-2: #aa791a;
$color-3: #8e8f93;
$color-4: #7f7e7c;
$color-5: #4272a0;

TAILWIND

colors: {
  'brand-1': '#966930',
  'brand-2': '#aa791a',
  'brand-3': '#8e8f93',
  'brand-4': '#7f7e7c',
  'brand-5': '#4272a0',
}

RGB Array

[150, 105, 48], [170, 121, 26], [142, 143, 147], [127, 126, 124], [66, 114, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #966930, #AA791A, #8E8F93, #7F7E7C, #4272A0 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: #966930; --color-2: #aa791a; --color-3: #8e8f93; --color-4: #7f7e7c; --color-5: #4272a0. 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