#5C9987 + #AAEDC7 + #F9F2C2 + #DAEF8F + #CCDD92 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5C9987

Mineral Blue · CadetBlue · Mint Ice

HEX

#5C9987

RGB

rgb(92, 153, 135)

HSL

hsl(162, 25%, 48%)

HSB

hsb(162, 40%, 60%)

CMYK

cmyk(40%, 0%, 12%, 40%)

Oklch

oklch(63.6% 0.070 173.2)

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

#AAEDC7

Emerald · LightBlue · Apple Green

HEX

#AAEDC7

RGB

rgb(170, 237, 199)

HSL

hsl(146, 65%, 80%)

HSB

hsb(146, 28%, 93%)

CMYK

cmyk(28%, 0%, 16%, 7%)

Oklch

oklch(89.1% 0.085 159.2)

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

#F9F2C2

Fresh Green · Bisque · Lemon Cream

HEX

#F9F2C2

RGB

rgb(249, 242, 194)

HSL

hsl(52, 82%, 87%)

HSB

hsb(52, 22%, 98%)

CMYK

cmyk(0%, 3%, 22%, 2%)

Oklch

oklch(95.5% 0.062 100.6)

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

#DAEF8F

Willow Green · Khaki · Apple Green

HEX

#DAEF8F

RGB

rgb(218, 239, 143)

HSL

hsl(73, 75%, 75%)

HSB

hsb(73, 40%, 94%)

CMYK

cmyk(9%, 0%, 40%, 6%)

Oklch

oklch(91.5% 0.123 119.0)

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

#CCDD92

Willow Green · Khaki · Apple Green

HEX

#CCDD92

RGB

rgb(204, 221, 146)

HSL

hsl(74, 52%, 72%)

HSB

hsb(74, 34%, 87%)

CMYK

cmyk(8%, 0%, 34%, 13%)

Oklch

oklch(86.7% 0.099 118.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C9987

995C6E

Analogous

5C9968

5C9987

5C8D99

Triadic

5C9987

875C99

99875C

Split-Comp.

5C9987

995C8D

99685C

Tetradic

5C9987

685C99

995C6E

8D995C

Contrast Matrix WCAG 2.1 Contrast

5C9987	AAEDC7	F9F2C2	DAEF8F	CCDD92
—	2.5 Fail	2.9 Fail	2.6 Fail	2.3 Fail
2.5 Fail	—	1.2 Fail	1.1 Fail	1.1 Fail
2.9 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
2.6 Fail	1.1 Fail	1.1 Fail	—	1.2 Fail
2.3 Fail	1.1 Fail	1.3 Fail	1.2 Fail	—

White BG

3.3AA Large

1.3Fail

1.1Fail

1.3Fail

1.5Fail

Black BG

6.4AA

15.6AAA

18.5AAA

16.7AAA

14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

76778B

C7C8D0

F6F6CE

E3E3A6

D3D4A4

Deuteranopia

736E8C

C3BED2

F6F7D0

E2E0AC

D2D1A9

Tritanopia

5F8F90

ADD7D9

F9D7D9

DBB9BD

CDB2B6

Achromatopsia

858585

D5D5D5

EFEFEF

DEDEDE

CFCFCF

Shades & Tints Shades & Tints

#5C9987

Dark

Light

#AAEDC7

Dark

Light

#F9F2C2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c9987;
  --color-2: #aaedc7;
  --color-3: #f9f2c2;
  --color-4: #daef8f;
  --color-5: #ccdd92;
}

SCSS

$color-1: #5c9987;
$color-2: #aaedc7;
$color-3: #f9f2c2;
$color-4: #daef8f;
$color-5: #ccdd92;

TAILWIND

colors: {
  'brand-1': '#5c9987',
  'brand-2': '#aaedc7',
  'brand-3': '#f9f2c2',
  'brand-4': '#daef8f',
  'brand-5': '#ccdd92',
}

RGB Array

[92, 153, 135], [170, 237, 199], [249, 242, 194], [218, 239, 143], [204, 221, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #5C9987, #AAEDC7, #F9F2C2, #DAEF8F, #CCDD92 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: #5c9987; --color-2: #aaedc7; --color-3: #f9f2c2; --color-4: #daef8f; --color-5: #ccdd92. 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