#5ACDB0 + #ACCDB0 + #CCD5AA + #C6FCA8 + #FBFDD5 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5ACDB0

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#5ACDB0

RGB

rgb(90, 205, 176)

HSL

hsl(165, 53%, 58%)

HSB

hsb(165, 56%, 80%)

CMYK

cmyk(56%, 0%, 14%, 20%)

Oklch

oklch(77.4% 0.113 174.1)

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

#ACCDB0

Celadon · Silver · Apple Green

HEX

#ACCDB0

RGB

rgb(172, 205, 176)

HSL

hsl(127, 25%, 74%)

HSB

hsb(127, 16%, 80%)

CMYK

cmyk(16%, 0%, 14%, 20%)

Oklch

oklch(81.6% 0.054 148.5)

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

#CCD5AA

Willow Green · Silver · Apple Green

HEX

#CCD5AA

RGB

rgb(204, 213, 170)

HSL

hsl(73, 34%, 75%)

HSB

hsb(73, 20%, 84%)

CMYK

cmyk(4%, 0%, 20%, 16%)

Oklch

oklch(85.5% 0.058 117.2)

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

#C6FCA8

Emerald · Khaki · Mint Green

HEX

#C6FCA8

RGB

rgb(198, 252, 168)

HSL

hsl(99, 93%, 82%)

HSB

hsb(99, 33%, 99%)

CMYK

cmyk(21%, 0%, 33%, 1%)

Oklch

oklch(93.4% 0.123 134.8)

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

#FBFDD5

Fresh Green · LightYellow · Lemon Cream

HEX

#FBFDD5

RGB

rgb(251, 253, 213)

HSL

hsl(63, 91%, 91%)

HSB

hsb(63, 16%, 99%)

CMYK

cmyk(1%, 0%, 16%, 1%)

Oklch

oklch(98.2% 0.052 109.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5ACDB0

CD5B78

Analogous

5BCD78

5ACDB0

5BB0CD

Triadic

5ACDB0

B05BCD

CDB05B

Split-Comp.

5ACDB0

CD5BB0

CD785B

Tetradic

5ACDB0

785BCD

CD5B78

B0CD5B

Contrast Matrix WCAG 2.1 Contrast

5ACDB0	ACCDB0	CCD5AA	C6FCA8	FBFDD5
—	1.1 Fail	1.3 Fail	1.7 Fail	1.9 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	1.7 Fail
1.3 Fail	1.1 Fail	—	1.3 Fail	1.5 Fail
1.7 Fail	1.5 Fail	1.3 Fail	—	1.1 Fail
1.9 Fail	1.7 Fail	1.5 Fail	1.1 Fail	—

White BG

1.9Fail

1.7Fail

1.5Fail

1.2Fail

1.0Fail

Black BG

10.8AAA

12.1AAA

13.7AAA

17.9AAA

20.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8DB7

BABBB7

D0D0B4

DDDEBC

FCFCDF

Deuteranopia

857DB9

B8B6B9

CFCFB7

DAD6C1

FCFCE1

Tritanopia

60BDBE

AEBDBE

CCBDBE

C9CCD0

FBE6E8

Achromatopsia

A7A7A7

C0C0C0

CDCDCD

E2E2E2

F8F8F8

Shades & Tints Shades & Tints

#5ACDB0

Dark

Light

#ACCDB0

Dark

Light

#CCD5AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5acdb0;
  --color-2: #accdb0;
  --color-3: #ccd5aa;
  --color-4: #c6fca8;
  --color-5: #fbfdd5;
}

SCSS

$color-1: #5acdb0;
$color-2: #accdb0;
$color-3: #ccd5aa;
$color-4: #c6fca8;
$color-5: #fbfdd5;

TAILWIND

colors: {
  'brand-1': '#5acdb0',
  'brand-2': '#accdb0',
  'brand-3': '#ccd5aa',
  'brand-4': '#c6fca8',
  'brand-5': '#fbfdd5',
}

RGB Array

[90, 205, 176], [172, 205, 176], [204, 213, 170], [198, 252, 168], [251, 253, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #5ACDB0, #ACCDB0, #CCD5AA, #C6FCA8, #FBFDD5 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: #5acdb0; --color-2: #accdb0; --color-3: #ccd5aa; --color-4: #c6fca8; --color-5: #fbfdd5. 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