#45CCD9 + #86C6B5 + #BBBBA3 + #E3ABA0 + #FF96AF · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#45CCD9

Lake Blue · MediumTurquoise · Lake Green

HEX

#45CCD9

RGB

rgb(69, 204, 217)

HSL

hsl(185, 66%, 56%)

HSB

hsb(185, 68%, 85%)

CMYK

cmyk(68%, 6%, 0%, 15%)

Oklch

oklch(77.9% 0.115 204.4)

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

#86C6B5

Jade · MediumAquaMarine · Lake Green

HEX

#86C6B5

RGB

rgb(134, 198, 181)

HSL

hsl(164, 36%, 65%)

HSB

hsb(164, 32%, 78%)

CMYK

cmyk(32%, 0%, 9%, 22%)

Oklch

oklch(77.8% 0.070 175.9)

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

#BBBBA3

Fresh Green · DarkGray · Sunflower

HEX

#BBBBA3

RGB

rgb(187, 187, 163)

HSL

hsl(60, 15%, 69%)

HSB

hsb(60, 13%, 73%)

CMYK

cmyk(0%, 0%, 13%, 27%)

Oklch

oklch(78.6% 0.033 107.1)

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

#E3ABA0

Peach Pink · Tan · Coral Red

HEX

#E3ABA0

RGB

rgb(227, 171, 160)

HSL

hsl(10, 54%, 76%)

HSB

hsb(10, 30%, 89%)

CMYK

cmyk(0%, 25%, 30%, 11%)

Oklch

oklch(79.0% 0.068 31.2)

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

#FF96AF

Peach Pink · LightPink · Coral Red

HEX

#FF96AF

RGB

rgb(255, 150, 175)

HSL

hsl(346, 100%, 79%)

HSB

hsb(346, 41%, 100%)

CMYK

cmyk(0%, 41%, 31%, 0%)

Oklch

oklch(78.9% 0.128 5.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45CCD9

D95145

Analogous

45D99B

45CCD9

4582D9

Triadic

45CCD9

D945CD

CDD945

Split-Comp.

45CCD9

D94582

D99B45

Tetradic

45CCD9

9B45D9

D95145

82D945

Contrast Matrix WCAG 2.1 Contrast

45CCD9	86C6B5	BBBBA3	E3ABA0	FF96AF
—	1.0 Fail	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.9Fail

2.0Fail

2.1Fail

Black BG

10.9AAA

10.8AAA

10.7AAA

10.6AAA

10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F81D6

A2A2B9

BBBBA9

CBCAA3

D2D1A9

Deuteranopia

786ED5

9E99BA

BBBBAA

CED2A3

D8E0A8

Tritanopia

4CD3D3

89BCBD

BBADAE

E0A5A5

FAA4A3

Achromatopsia

A5A5A5

B1B1B1

B8B8B8

BABABA

B8B8B8

Shades & Tints Shades & Tints

#45CCD9

Dark

Light

#86C6B5

Dark

Light

#BBBBA3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45ccd9;
  --color-2: #86c6b5;
  --color-3: #bbbba3;
  --color-4: #e3aba0;
  --color-5: #ff96af;
}

SCSS

$color-1: #45ccd9;
$color-2: #86c6b5;
$color-3: #bbbba3;
$color-4: #e3aba0;
$color-5: #ff96af;

TAILWIND

colors: {
  'brand-1': '#45ccd9',
  'brand-2': '#86c6b5',
  'brand-3': '#bbbba3',
  'brand-4': '#e3aba0',
  'brand-5': '#ff96af',
}

RGB Array

[69, 204, 217], [134, 198, 181], [187, 187, 163], [227, 171, 160], [255, 150, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #45CCD9, #86C6B5, #BBBBA3, #E3ABA0, #FF96AF is ideal for: health products, baby brands, fresh-style blogs. 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: #45ccd9; --color-2: #86c6b5; --color-3: #bbbba3; --color-4: #e3aba0; --color-5: #ff96af. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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