#5ADCE0 + #77B89F + #8B9672 + #8A7E54 + #85623A · 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

#5ADCE0

Sky Blue · MediumTurquoise · Lake Green

HEX

#5ADCE0

RGB

rgb(90, 220, 224)

HSL

hsl(182, 68%, 62%)

HSB

hsb(182, 60%, 88%)

CMYK

cmyk(60%, 2%, 0%, 12%)

Oklch

oklch(82.5% 0.113 198.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#77B89F

Mineral Blue · DarkSeaGreen · Olive Green

HEX

#77B89F

RGB

rgb(119, 184, 159)

HSL

hsl(157, 31%, 59%)

HSB

hsb(157, 35%, 72%)

CMYK

cmyk(35%, 0%, 14%, 28%)

Oklch

oklch(73.2% 0.076 168.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#8B9672

Grass Green · Gray · Olive Green

HEX

#8B9672

RGB

rgb(139, 150, 114)

HSL

hsl(78, 15%, 52%)

HSB

hsb(78, 24%, 59%)

CMYK

cmyk(7%, 0%, 24%, 41%)

Oklch

oklch(65.4% 0.053 121.7)

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

#8A7E54

Ochre · DimGray · Honey Gold

HEX

#8A7E54

RGB

rgb(138, 126, 84)

HSL

hsl(47, 24%, 44%)

HSB

hsb(47, 39%, 54%)

CMYK

cmyk(0%, 9%, 39%, 46%)

Oklch

oklch(59.3% 0.061 94.0)

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

#85623A

Ochre · Sienna · Amber Brown

HEX

#85623A

RGB

rgb(133, 98, 58)

HSL

hsl(32, 39%, 37%)

HSB

hsb(32, 56%, 52%)

CMYK

cmyk(0%, 26%, 56%, 48%)

Oklch

oklch(52.3% 0.072 68.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5ADCE0

E0615C

Analogous

5CE0A2

5ADCE0

5C9AE0

Triadic

5ADCE0

E05CDC

DCE05C

Split-Comp.

5ADCE0

E05C9A

E0A25C

Tetradic

5ADCE0

A25CE0

E0615C

9AE05C

Contrast Matrix WCAG 2.1 Contrast

5ADCE0	77B89F	8B9672	8A7E54	85623A
—	1.4 Fail	1.9 Fail	2.5 Fail	3.4 AA Large
1.4 Fail	—	1.4 Fail	1.8 Fail	2.4 Fail
1.9 Fail	1.4 Fail	—	1.3 Fail	1.8 Fail
2.5 Fail	1.8 Fail	1.3 Fail	—	1.4 Fail
3.4 AA Large	2.4 Fail	1.8 Fail	1.4 Fail	—

White BG

1.6Fail

2.3Fail

3.1AA Large

4.0AA Large

5.5AA

Black BG

12.7AAA

9.1AAA

6.7AA

5.2AA

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9293DF

9394A5

90907B

85855E

767644

Deuteranopia

8B81DF

8F8BA7

8F8E7D

868661

787B46

Tritanopia

61DEDE

7AAAAB

8C8283

896668

834B4D

Achromatopsia

B6B6B6

A2A2A2

8F8F8F

7D7D7D

686868

Shades & Tints Shades & Tints

#5ADCE0

Dark

Light

#77B89F

Dark

Light

#8B9672

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5adce0;
  --color-2: #77b89f;
  --color-3: #8b9672;
  --color-4: #8a7e54;
  --color-5: #85623a;
}

SCSS

$color-1: #5adce0;
$color-2: #77b89f;
$color-3: #8b9672;
$color-4: #8a7e54;
$color-5: #85623a;

TAILWIND

colors: {
  'brand-1': '#5adce0',
  'brand-2': '#77b89f',
  'brand-3': '#8b9672',
  'brand-4': '#8a7e54',
  'brand-5': '#85623a',
}

RGB Array

[90, 220, 224], [119, 184, 159], [139, 150, 114], [138, 126, 84], [133, 98, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #5ADCE0, #77B89F, #8B9672, #8A7E54, #85623A 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: #5adce0; --color-2: #77b89f; --color-3: #8b9672; --color-4: #8a7e54; --color-5: #85623a. 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