← Back to Editor

#2B6E77 · #508283 · #77907B · #A0A07E · #BFB973

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

#2B6E77

Slate Blue · SeaGreen · Mint Ice

HEX
#2B6E77
RGB
rgb(43, 110, 119)
HSL
hsl(187, 47%, 32%)
HSB
hsb(187, 64%, 47%)
CMYK
cmyk(64%, 8%, 0%, 53%)
Oklch
oklch(50.0% 0.068 207.4)

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

#508283

Slate Blue · SlateGray · Mint Ice

HEX
#508283
RGB
rgb(80, 130, 131)
HSL
hsl(181, 24%, 41%)
HSB
hsb(181, 39%, 51%)
CMYK
cmyk(39%, 1%, 0%, 49%)
Oklch
oklch(57.2% 0.054 197.4)

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

#77907B

Celadon · Gray · Olive Green

HEX
#77907B
RGB
rgb(119, 144, 123)
HSL
hsl(130, 10%, 52%)
HSB
hsb(130, 17%, 56%)
CMYK
cmyk(17%, 0%, 15%, 44%)
Oklch
oklch(62.8% 0.042 149.6)

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

#A0A07E

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A0A07E
RGB
rgb(160, 160, 126)
HSL
hsl(60, 15%, 56%)
HSB
hsb(60, 21%, 63%)
CMYK
cmyk(0%, 0%, 21%, 37%)
Oklch
oklch(69.7% 0.048 107.6)

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

#BFB973

Autumn Sage · Tan · Sunflower

HEX
#BFB973
RGB
rgb(191, 185, 115)
HSL
hsl(55, 37%, 60%)
HSB
hsb(55, 40%, 75%)
CMYK
cmyk(0%, 3%, 40%, 25%)
Oklch
oklch(77.5% 0.091 104.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B6E77
78342B

Analogous

2B785B
2B6E77
2B4978

Triadic

2B6E77
782B6F
6F782B

Split-Comp.

2B6E77
782B49
785B2B

Tetradic

2B6E77
5B2B78
78342B
49782B

Contrast Matrix WCAG 2.1 Contrast

2B6E77
508283
77907B
A0A07E
BFB973
—
1.4
Fail
1.7
Fail
2.2
Fail
2.9
Fail
1.4
Fail
—
1.2
Fail
1.6
Fail
2.1
Fail
1.7
Fail
1.2
Fail
—
1.3
Fail
1.7
Fail
2.2
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
2.9
Fail
2.1
Fail
1.7
Fail
1.3
Fail
—
White BG
5.8AA
4.3AA Large
3.5AA Large
2.7Fail
2.0Fail
Black BG
3.6AA Large
4.9AA
6.1AA
7.8AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484975
666683
828280
A0A086
BCBC84

Deuteranopia

443F74
635F83
807F81
A0A088
BDBD88

Tritanopia

2E7373
538383
788485
A08D8E
BF9194

Achromatopsia

5B5B5B
737373
868686
9C9C9C
B3B3B3

Shades & Tints Shades & Tints

#2B6E77

Dark
Light

#508283

Dark
Light

#77907B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b6e77;
  --color-2: #508283;
  --color-3: #77907b;
  --color-4: #a0a07e;
  --color-5: #bfb973;
}

SCSS

$color-1: #2b6e77;
$color-2: #508283;
$color-3: #77907b;
$color-4: #a0a07e;
$color-5: #bfb973;

TAILWIND

colors: {
  'brand-1': '#2b6e77',
  'brand-2': '#508283',
  'brand-3': '#77907b',
  'brand-4': '#a0a07e',
  'brand-5': '#bfb973',
}

RGB Array

[43, 110, 119], [80, 130, 131], [119, 144, 123], [160, 160, 126], [191, 185, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #2B6E77, #508283, #77907B, #A0A07E, #BFB973 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2b6e77; --color-2: #508283; --color-3: #77907b; --color-4: #a0a07e; --color-5: #bfb973. 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. Restrained colors convey professionalism and trust. 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