#BBE8B0 + #9AEDBD + #0DFFE4 + #7C92A1 + #6F6C8C · 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

#BBE8B0

Emerald · Silver · Apple Green

HEX

#BBE8B0

RGB

rgb(187, 232, 176)

HSL

hsl(108, 55%, 80%)

HSB

hsb(108, 24%, 91%)

CMYK

cmyk(19%, 0%, 24%, 9%)

Oklch

oklch(88.5% 0.089 139.5)

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

#9AEDBD

Emerald · LightGreen · Apple Green

HEX

#9AEDBD

RGB

rgb(154, 237, 189)

HSL

hsl(145, 70%, 77%)

HSB

hsb(145, 35%, 93%)

CMYK

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

Oklch

oklch(88.0% 0.105 158.0)

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

#0DFFE4

Mineral Blue · Cyan · Lake Green

HEX

#0DFFE4

RGB

rgb(13, 255, 228)

HSL

hsl(173, 100%, 53%)

HSB

hsb(173, 95%, 100%)

CMYK

cmyk(95%, 0%, 11%, 0%)

Oklch

oklch(89.7% 0.160 181.4)

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

#7C92A1

Slate Blue · LightSlateGray · Navy Blue

HEX

#7C92A1

RGB

rgb(124, 146, 161)

HSL

hsl(204, 16%, 56%)

HSB

hsb(204, 23%, 63%)

CMYK

cmyk(23%, 9%, 0%, 37%)

Oklch

oklch(64.8% 0.034 237.9)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#6F6C8C

Deep Indigo · SlateGray · Navy Blue

HEX

#6F6C8C

RGB

rgb(111, 108, 140)

HSL

hsl(246, 13%, 49%)

HSB

hsb(246, 23%, 55%)

CMYK

cmyk(21%, 23%, 0%, 45%)

Oklch

oklch(54.6% 0.050 288.9)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBE8B0

DDB0E8

Analogous

D7E8B0

BBE8B0

B0E8C1

Triadic

BBE8B0

B0BBE8

E8B0BB

Split-Comp.

BBE8B0

C1B0E8

E8B0D7

Tetradic

BBE8B0

B0D7E8

DDB0E8

E8C1B0

Contrast Matrix WCAG 2.1 Contrast

BBE8B0	9AEDBD	0DFFE4	7C92A1	6F6C8C
—	1.0 Fail	1.1 Fail	2.4 Fail	3.6 AA Large
1.0 Fail	—	1.1 Fail	2.3 Fail	3.6 AA Large
1.1 Fail	1.1 Fail	—	2.5 Fail	3.9 AA Large
2.4 Fail	2.3 Fail	2.5 Fail	—	1.5 Fail
3.6 AA Large	3.6 AA Large	3.9 AA Large	1.5 Fail	—

White BG

1.4Fail

1.3Fail

3.2AA Large

5.0AA

Black BG

15.3AAA

15.2AAA

16.4AAA

6.5AA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECFBE

BEBFC9

7678EB

86869D

6E6E84

Deuteranopia

CCC9C1

B9B3CB

6856EC

84839D

6E6E82

Tritanopia

BDC8CB

9ED2D4

19F0F1

7D9B9A

6F7E7D

Achromatopsia

D4D4D4

CFCFCF

B4B4B4

8D8D8D

717171

Shades & Tints Shades & Tints

#BBE8B0

Dark

Light

#9AEDBD

Dark

Light

#0DFFE4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbe8b0;
  --color-2: #9aedbd;
  --color-3: #0dffe4;
  --color-4: #7c92a1;
  --color-5: #6f6c8c;
}

SCSS

$color-1: #bbe8b0;
$color-2: #9aedbd;
$color-3: #0dffe4;
$color-4: #7c92a1;
$color-5: #6f6c8c;

TAILWIND

colors: {
  'brand-1': '#bbe8b0',
  'brand-2': '#9aedbd',
  'brand-3': '#0dffe4',
  'brand-4': '#7c92a1',
  'brand-5': '#6f6c8c',
}

RGB Array

[187, 232, 176], [154, 237, 189], [13, 255, 228], [124, 146, 161], [111, 108, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #BBE8B0, #9AEDBD, #0DFFE4, #7C92A1, #6F6C8C 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: #bbe8b0; --color-2: #9aedbd; --color-3: #0dffe4; --color-4: #7c92a1; --color-5: #6f6c8c. 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