← Back to Editor

#B37132 · #654914 · #646D5F · #78805F · #B8A86B

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B37132

Tangerine · Sienna · Amber Brown

HEX
#B37132
RGB
rgb(179, 113, 50)
HSL
hsl(29, 56%, 45%)
HSB
hsb(29, 72%, 70%)
CMYK
cmyk(0%, 37%, 72%, 30%)
Oklch
oklch(60.8% 0.114 61.3)

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

#654914

Ochre · DarkOliveGreen · Cinnamon

HEX
#654914
RGB
rgb(101, 73, 20)
HSL
hsl(39, 67%, 24%)
HSB
hsb(39, 80%, 40%)
CMYK
cmyk(0%, 28%, 80%, 60%)
Oklch
oklch(42.6% 0.077 79.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#646D5F

Ink Gray · DimGray · Charcoal

HEX
#646D5F
RGB
rgb(100, 109, 95)
HSL
hsl(99, 7%, 40%)
HSB
hsb(99, 13%, 43%)
CMYK
cmyk(8%, 0%, 13%, 57%)
Oklch
oklch(52.3% 0.024 134.2)

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

#78805F

Grass Green · DimGray · Olive Green

HEX
#78805F
RGB
rgb(120, 128, 95)
HSL
hsl(75, 15%, 44%)
HSB
hsb(75, 26%, 50%)
CMYK
cmyk(6%, 0%, 26%, 50%)
Oklch
oklch(58.4% 0.049 119.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#B8A86B

Ginger · Tan · Sunflower

HEX
#B8A86B
RGB
rgb(184, 168, 107)
HSL
hsl(48, 35%, 57%)
HSB
hsb(48, 42%, 72%)
CMYK
cmyk(0%, 9%, 42%, 28%)
Oklch
oklch(73.1% 0.082 95.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B37132
3275B3

Analogous

B33235
B37132
B3B132

Triadic

B37132
32B371
7132B3

Split-Comp.

B37132
32B3B1
3235B3

Tetradic

B37132
35B332
3275B3
B132B3

Contrast Matrix WCAG 2.1 Contrast

B37132
654914
646D5F
78805F
B8A86B
—
2.1
Fail
1.4
Fail
1.1
Fail
1.7
Fail
2.1
Fail
—
1.5
Fail
2.0
Fail
3.5
AA Large
1.4
Fail
1.5
Fail
—
1.3
Fail
2.3
Fail
1.1
Fail
2.0
Fail
1.3
Fail
—
1.8
Fail
1.7
Fail
3.5
AA Large
2.3
Fail
1.8
Fail
—
White BG
3.9AA Large
8.3AAA
5.4AA
4.2AA Large
2.4Fail
Black BG
5.3AA
2.5Fail
3.9AA Large
5.1AA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

969641
595921
686862
7B7C67
B1B17A

Deuteranopia

9A9F45
5B5D24
676763
7B7A69
B2B37D

Tritanopia

B04D50
642B2D
646566
786D6F
B78588

Achromatopsia

7E7E7E
4B4B4B
696969
7A7A7A
A6A6A6

Shades & Tints Shades & Tints

#B37132

Dark
Light

#654914

Dark
Light

#646D5F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b37132;
  --color-2: #654914;
  --color-3: #646d5f;
  --color-4: #78805f;
  --color-5: #b8a86b;
}

SCSS

$color-1: #b37132;
$color-2: #654914;
$color-3: #646d5f;
$color-4: #78805f;
$color-5: #b8a86b;

TAILWIND

colors: {
  'brand-1': '#b37132',
  'brand-2': '#654914',
  'brand-3': '#646d5f',
  'brand-4': '#78805f',
  'brand-5': '#b8a86b',
}

RGB Array

[179, 113, 50], [101, 73, 20], [100, 109, 95], [120, 128, 95], [184, 168, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #B37132, #654914, #646D5F, #78805F, #B8A86B 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: #b37132; --color-2: #654914; --color-3: #646d5f; --color-4: #78805f; --color-5: #b8a86b. 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