#B9B353 + #377164 + #182A32 + #A9842D + #EBB12D · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B9B353

Autumn Sage · Tan · Sunflower

HEX

#B9B353

RGB

rgb(185, 179, 83)

HSL

hsl(56, 42%, 53%)

HSB

hsb(56, 55%, 73%)

CMYK

cmyk(0%, 3%, 55%, 27%)

Oklch

oklch(75.2% 0.119 105.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#377164

Mineral Blue · SeaGreen · Mint Ice

HEX

#377164

RGB

rgb(55, 113, 100)

HSL

hsl(167, 35%, 33%)

HSB

hsb(167, 51%, 44%)

CMYK

cmyk(51%, 0%, 12%, 56%)

Oklch

oklch(50.5% 0.065 177.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#182A32

Slate Blue · DarkSlateGray · Peacock Green

HEX

#182A32

RGB

rgb(24, 42, 50)

HSL

hsl(198, 35%, 15%)

HSB

hsb(198, 52%, 20%)

CMYK

cmyk(52%, 16%, 0%, 80%)

Oklch

oklch(27.3% 0.028 227.9)

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

#A9842D

Ochre · DarkGoldenRod · Honey Gold

HEX

#A9842D

RGB

rgb(169, 132, 45)

HSL

hsl(42, 58%, 42%)

HSB

hsb(42, 73%, 66%)

CMYK

cmyk(0%, 22%, 73%, 34%)

Oklch

oklch(63.3% 0.112 84.9)

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

#EBB12D

Ginger · GoldenRod · Sunflower

HEX

#EBB12D

RGB

rgb(235, 177, 45)

HSL

hsl(42, 83%, 55%)

HSB

hsb(42, 81%, 92%)

CMYK

cmyk(0%, 25%, 81%, 8%)

Oklch

oklch(79.4% 0.151 82.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9B353

555CB9

Analogous

B98055

B9B353

8EB955

Triadic

B9B353

55B9B3

B355B9

Split-Comp.

B9B353

558EB9

8055B9

Tetradic

B9B353

55B980

555CB9

B9558E

Contrast Matrix WCAG 2.1 Contrast

B9B353	377164	182A32	A9842D	EBB12D
—	2.6 Fail	6.8 AA	1.6 Fail	1.1 Fail
2.6 Fail	—	2.6 Fail	1.6 Fail	2.9 Fail
6.8 AA	2.6 Fail	—	4.3 AA Large	7.7 AAA
1.6 Fail	1.6 Fail	4.3 AA Large	—	1.8 Fail
1.1 Fail	2.9 Fail	7.7 AAA	1.8 Fail	—

White BG

2.2Fail

5.7AA

14.8AAA

3.5AA Large

1.9Fail

Black BG

9.6AAA

3.7AA Large

1.4Fail

6.0AA

10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B66A

505167

202030

999942

D2D14D

Deuteranopia

B7B770

4D4868

1F1D30

9B9E47

D5DA55

Tritanopia

B97D81

3A6A6A

192F2E

A75356

E8666C

Achromatopsia

AAAAAA

5E5E5E

262626

858585

B3B3B3

Shades & Tints Shades & Tints

#B9B353

Dark

Light

#377164

Dark

Light

#182A32

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9b353;
  --color-2: #377164;
  --color-3: #182a32;
  --color-4: #a9842d;
  --color-5: #ebb12d;
}

SCSS

$color-1: #b9b353;
$color-2: #377164;
$color-3: #182a32;
$color-4: #a9842d;
$color-5: #ebb12d;

TAILWIND

colors: {
  'brand-1': '#b9b353',
  'brand-2': '#377164',
  'brand-3': '#182a32',
  'brand-4': '#a9842d',
  'brand-5': '#ebb12d',
}

RGB Array

[185, 179, 83], [55, 113, 100], [24, 42, 50], [169, 132, 45], [235, 177, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #B9B353, #377164, #182A32, #A9842D, #EBB12D is ideal for: tech websites, dark mode UIs, game UIs. 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: #b9b353; --color-2: #377164; --color-3: #182a32; --color-4: #a9842d; --color-5: #ebb12d. 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. 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