#51A183 + #BBCEBC + #FE7365 + #F7D29D + #4C5D8F · 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

#51A183

Mineral Blue · CadetBlue · Olive Green

HEX

#51A183

RGB

rgb(81, 161, 131)

HSL

hsl(158, 33%, 47%)

HSB

hsb(158, 50%, 63%)

CMYK

cmyk(50%, 0%, 19%, 37%)

Oklch

oklch(65.0% 0.092 166.8)

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

#BBCEBC

Celadon · Silver · Apple Green

HEX

#BBCEBC

RGB

rgb(187, 206, 188)

HSL

hsl(123, 16%, 77%)

HSB

hsb(123, 9%, 81%)

CMYK

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

Oklch

oklch(83.2% 0.032 146.7)

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

#FE7365

Peach Pink · Salmon · Coral Red

HEX

#FE7365

RGB

rgb(254, 115, 101)

HSL

hsl(5, 99%, 70%)

HSB

hsb(5, 60%, 100%)

CMYK

cmyk(0%, 55%, 60%, 0%)

Oklch

oklch(72.0% 0.172 27.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F7D29D

Goose Yellow · Wheat · Peach Orange

HEX

#F7D29D

RGB

rgb(247, 210, 157)

HSL

hsl(35, 85%, 79%)

HSB

hsb(35, 36%, 97%)

CMYK

cmyk(0%, 15%, 36%, 3%)

Oklch

oklch(88.3% 0.080 76.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#4C5D8F

Indigo · DarkSlateBlue · Navy Blue

HEX

#4C5D8F

RGB

rgb(76, 93, 143)

HSL

hsl(225, 31%, 43%)

HSB

hsb(225, 47%, 56%)

CMYK

cmyk(47%, 35%, 0%, 44%)

Oklch

oklch(48.7% 0.083 268.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51A183

9F506D

Analogous

509F5B

51A183

50959F

Triadic

51A183

82509F

9F8250

Split-Comp.

51A183

9F5095

9F5B50

Tetradic

51A183

5B509F

9F506D

959F50

Contrast Matrix WCAG 2.1 Contrast

51A183	BBCEBC	FE7365	F7D29D	4C5D8F
—	1.9 Fail	1.2 Fail	2.2 Fail	2.1 Fail
1.9 Fail	—	1.6 Fail	1.2 Fail	3.9 AA Large
1.2 Fail	1.6 Fail	—	1.9 Fail	2.4 Fail
2.2 Fail	1.2 Fail	1.9 Fail	—	4.5 AA Large
2.1 Fail	3.9 AA Large	2.4 Fail	4.5 AA Large	—

White BG

3.1AA Large

1.7Fail

2.7Fail

1.4Fail

6.4AA

Black BG

6.8AA

12.7AAA

7.9AAA

14.7AAA

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

74748A

C3C3C0

C2C168

E7E7AA

535483

Deuteranopia

6F698C

C2C1C1

CAD469

E9ECAD

525180

Tritanopia

559091

BCC4C5

F76B6C

F5B4B6

4D7977

Achromatopsia

868686

C6C6C6

9B9B9B

D7D7D7

5E5E5E

Shades & Tints Shades & Tints

#51A183

Dark

Light

#BBCEBC

Dark

Light

#FE7365

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51a183;
  --color-2: #bbcebc;
  --color-3: #fe7365;
  --color-4: #f7d29d;
  --color-5: #4c5d8f;
}

SCSS

$color-1: #51a183;
$color-2: #bbcebc;
$color-3: #fe7365;
$color-4: #f7d29d;
$color-5: #4c5d8f;

TAILWIND

colors: {
  'brand-1': '#51a183',
  'brand-2': '#bbcebc',
  'brand-3': '#fe7365',
  'brand-4': '#f7d29d',
  'brand-5': '#4c5d8f',
}

RGB Array

[81, 161, 131], [187, 206, 188], [254, 115, 101], [247, 210, 157], [76, 93, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #51A183, #BBCEBC, #FE7365, #F7D29D, #4C5D8F 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: #51a183; --color-2: #bbcebc; --color-3: #fe7365; --color-4: #f7d29d; --color-5: #4c5d8f. 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