← Back to Editor

#884518 · #C4B68A · #8A8D77 · #535E4B · #363219

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 LibraryData Visualization

Color Details Color Details

#884518

Tangerine · Sienna · Amber Brown

HEX
#884518
RGB
rgb(136, 69, 24)
HSL
hsl(24, 70%, 31%)
HSB
hsb(24, 82%, 53%)
CMYK
cmyk(0%, 49%, 82%, 47%)
Oklch
oklch(46.7% 0.107 50.4)

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

#C4B68A

Ginger · Tan · Sunflower

HEX
#C4B68A
RGB
rgb(196, 182, 138)
HSL
hsl(46, 33%, 65%)
HSB
hsb(46, 30%, 77%)
CMYK
cmyk(0%, 7%, 30%, 23%)
Oklch
oklch(77.7% 0.061 92.5)

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

#8A8D77

Autumn Sage · Gray · Warm Gray

HEX
#8A8D77
RGB
rgb(138, 141, 119)
HSL
hsl(68, 9%, 51%)
HSB
hsb(68, 16%, 55%)
CMYK
cmyk(2%, 0%, 16%, 45%)
Oklch
oklch(63.5% 0.032 113.6)

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

#535E4B

Celadon · DarkOliveGreen · Forest Green

HEX
#535E4B
RGB
rgb(83, 94, 75)
HSL
hsl(95, 11%, 33%)
HSB
hsb(95, 20%, 37%)
CMYK
cmyk(12%, 0%, 20%, 63%)
Oklch
oklch(46.7% 0.033 132.2)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#363219

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#363219
RGB
rgb(54, 50, 25)
HSL
hsl(52, 37%, 15%)
HSB
hsb(52, 54%, 21%)
CMYK
cmyk(0%, 7%, 54%, 79%)
Oklch
oklch(31.4% 0.040 100.4)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

884518
185A86

Analogous

861823
884518
867B18

Triadic

884518
188644
441886

Split-Comp.

884518
18867B
182386

Tetradic

884518
238618
185A86
7B1886

Contrast Matrix WCAG 2.1 Contrast

884518
C4B68A
8A8D77
535E4B
363219
—
3.6
AA Large
2.1
Fail
1.1
Fail
1.8
Fail
3.6
AA Large
—
1.7
Fail
3.4
AA Large
6.4
AA
2.1
Fail
1.7
Fail
—
2.0
Fail
3.8
AA Large
1.1
Fail
3.4
AA Large
2.0
Fail
—
1.9
Fail
1.8
Fail
6.4
AA
3.8
AA Large
1.9
Fail
—
White BG
7.2AAA
2.0Fail
3.4AA Large
6.8AA
12.9AAA
Black BG
2.9Fail
10.4AAA
6.2AA
3.1AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6A23
BEBE95
8B8B7C
585850
34341F

Deuteranopia

6F7426
BFC097
8B8B7E
575651
353521

Tritanopia

852B2D
C39D9F
8A8181
545354
362425

Achromatopsia

545454
B5B5B5
8A8A8A
595959
303030

Shades & Tints Shades & Tints

#884518

Dark
Light

#C4B68A

Dark
Light

#8A8D77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #884518;
  --color-2: #c4b68a;
  --color-3: #8a8d77;
  --color-4: #535e4b;
  --color-5: #363219;
}

SCSS

$color-1: #884518;
$color-2: #c4b68a;
$color-3: #8a8d77;
$color-4: #535e4b;
$color-5: #363219;

TAILWIND

colors: {
  'brand-1': '#884518',
  'brand-2': '#c4b68a',
  'brand-3': '#8a8d77',
  'brand-4': '#535e4b',
  'brand-5': '#363219',
}

RGB Array

[136, 69, 24], [196, 182, 138], [138, 141, 119], [83, 94, 75], [54, 50, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #884518, #C4B68A, #8A8D77, #535E4B, #363219 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: #884518; --color-2: #c4b68a; --color-3: #8a8d77; --color-4: #535e4b; --color-5: #363219. 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