#A7BEB8 + #E2E36B + #A7D187 + #55C7AE + #0FB7C2 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A7BEB8

Jade · DarkGray · Lake Green

HEX

#A7BEB8

RGB

rgb(167, 190, 184)

HSL

hsl(164, 15%, 70%)

HSB

hsb(164, 12%, 75%)

CMYK

cmyk(12%, 0%, 3%, 25%)

Oklch

oklch(78.2% 0.027 178.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#E2E36B

Fresh Green · Khaki · Sunflower

HEX

#E2E36B

RGB

rgb(226, 227, 107)

HSL

hsl(60, 68%, 65%)

HSB

hsb(60, 53%, 89%)

CMYK

cmyk(0%, 0%, 53%, 11%)

Oklch

oklch(89.1% 0.143 109.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#A7D187

Celadon · DarkSeaGreen · Apple Green

HEX

#A7D187

RGB

rgb(167, 209, 135)

HSL

hsl(94, 45%, 67%)

HSB

hsb(94, 35%, 82%)

CMYK

cmyk(20%, 0%, 35%, 18%)

Oklch

oklch(81.3% 0.109 132.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#55C7AE

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#55C7AE

RGB

rgb(85, 199, 174)

HSL

hsl(167, 50%, 56%)

HSB

hsb(167, 57%, 78%)

CMYK

cmyk(57%, 0%, 13%, 22%)

Oklch

oklch(75.7% 0.110 176.4)

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

#0FB7C2

Lake Blue · LightSeaGreen · Mint Ice

HEX

#0FB7C2

RGB

rgb(15, 183, 194)

HSL

hsl(184, 86%, 41%)

HSB

hsb(184, 92%, 76%)

CMYK

cmyk(92%, 6%, 0%, 24%)

Oklch

oklch(71.1% 0.119 202.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7BEB8

BEA7AD

Analogous

A7BEAC

A7BEB8

A7B9BE

Triadic

A7BEB8

B8A7BE

BEB8A7

Split-Comp.

A7BEB8

BEA7B9

BEACA7

Tetradic

A7BEB8

ACA7BE

BEA7AD

B9BEA7

Contrast Matrix WCAG 2.1 Contrast

A7BEB8	E2E36B	A7D187	55C7AE	0FB7C2
—	1.4 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.4 Fail	—	1.3 Fail	1.5 Fail	1.8 Fail
1.1 Fail	1.3 Fail	—	1.2 Fail	1.4 Fail
1.1 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
1.2 Fail	1.8 Fail	1.4 Fail	1.2 Fail	—

White BG

2.0Fail

1.4Fail

1.7Fail

2.1Fail

2.4Fail

Black BG

10.7AAA

15.4AAA

12.1AAA

10.2AAA

8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1B9

E2E288

B9BA99

8687B4

5859BF

Deuteranopia

B0AEBA

E2E28F

B7B49D

8077B6

4E41BF

Tritanopia

A8BBBB

E29FA4

A9A7AA

5BB9BA

17BDBD

Achromatopsia

B6B6B6

D5D5D5

BCBCBC

A2A2A2

868686

Shades & Tints Shades & Tints

#A7BEB8

Dark

Light

#E2E36B

Dark

Light

#A7D187

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7beb8;
  --color-2: #e2e36b;
  --color-3: #a7d187;
  --color-4: #55c7ae;
  --color-5: #0fb7c2;
}

SCSS

$color-1: #a7beb8;
$color-2: #e2e36b;
$color-3: #a7d187;
$color-4: #55c7ae;
$color-5: #0fb7c2;

TAILWIND

colors: {
  'brand-1': '#a7beb8',
  'brand-2': '#e2e36b',
  'brand-3': '#a7d187',
  'brand-4': '#55c7ae',
  'brand-5': '#0fb7c2',
}

RGB Array

[167, 190, 184], [226, 227, 107], [167, 209, 135], [85, 199, 174], [15, 183, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A7BEB8, #E2E36B, #A7D187, #55C7AE, #0FB7C2 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: #a7beb8; --color-2: #e2e36b; --color-3: #a7d187; --color-4: #55c7ae; --color-5: #0fb7c2. 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