#7FDBCE + #88D1C8 + #81BDB5 + #40A5AF + #F2EEC1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7FDBCE

Jade · SkyBlue · Lake Green

HEX

#7FDBCE

RGB

rgb(127, 219, 206)

HSL

hsl(172, 56%, 68%)

HSB

hsb(172, 42%, 86%)

CMYK

cmyk(42%, 0%, 6%, 14%)

Oklch

oklch(83.0% 0.090 184.1)

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

#88D1C8

Jade · SkyBlue · Lake Green

HEX

#88D1C8

RGB

rgb(136, 209, 200)

HSL

hsl(173, 44%, 68%)

HSB

hsb(173, 35%, 82%)

CMYK

cmyk(35%, 0%, 4%, 18%)

Oklch

oklch(81.0% 0.074 186.0)

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

#81BDB5

Jade · MediumAquaMarine · Lake Green

HEX

#81BDB5

RGB

rgb(129, 189, 181)

HSL

hsl(172, 31%, 62%)

HSB

hsb(172, 32%, 74%)

CMYK

cmyk(32%, 0%, 4%, 26%)

Oklch

oklch(75.5% 0.063 185.5)

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

#40A5AF

Slate Blue · LightSeaGreen · Mint Ice

HEX

#40A5AF

RGB

rgb(64, 165, 175)

HSL

hsl(185, 46%, 47%)

HSB

hsb(185, 63%, 69%)

CMYK

cmyk(63%, 6%, 0%, 31%)

Oklch

oklch(66.8% 0.093 204.3)

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

#F2EEC1

Fresh Green · Bisque · Lemon Cream

HEX

#F2EEC1

RGB

rgb(242, 238, 193)

HSL

hsl(55, 65%, 85%)

HSB

hsb(55, 20%, 95%)

CMYK

cmyk(0%, 2%, 20%, 5%)

Oklch

oklch(94.1% 0.059 103.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7FDBCE

DB808C

Analogous

80DBA1

7FDBCE

80BADB

Triadic

7FDBCE

CF80DB

DBCF80

Split-Comp.

7FDBCE

DB80BA

DBA180

Tetradic

7FDBCE

A180DB

DB808C

BADB80

Contrast Matrix WCAG 2.1 Contrast

7FDBCE	88D1C8	81BDB5	40A5AF	F2EEC1
—	1.1 Fail	1.3 Fail	1.8 Fail	1.4 Fail
1.1 Fail	—	1.2 Fail	1.7 Fail	1.5 Fail
1.3 Fail	1.2 Fail	—	1.4 Fail	1.8 Fail
1.8 Fail	1.7 Fail	1.4 Fail	—	2.5 Fail
1.4 Fail	1.5 Fail	1.8 Fail	2.5 Fail	—

White BG

1.6Fail

1.7Fail

2.1Fail

2.9Fail

1.2Fail

Black BG

12.9AAA

12.0AAA

9.9AAA

7.2AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A8D1

A8A8CA

9B9CB7

6C6DAD

F0F0CC

Deuteranopia

A29BD2

A39ECB

9893B7

665EAC

F1F1CF

Tritanopia

84D4D4

8CCCCC

84B8B9

45ABAA

F2D4D6

Achromatopsia

BEBEBE

BABABA

AAAAAA

888888

EAEAEA

Shades & Tints Shades & Tints

#7FDBCE

Dark

Light

#88D1C8

Dark

Light

#81BDB5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7fdbce;
  --color-2: #88d1c8;
  --color-3: #81bdb5;
  --color-4: #40a5af;
  --color-5: #f2eec1;
}

SCSS

$color-1: #7fdbce;
$color-2: #88d1c8;
$color-3: #81bdb5;
$color-4: #40a5af;
$color-5: #f2eec1;

TAILWIND

colors: {
  'brand-1': '#7fdbce',
  'brand-2': '#88d1c8',
  'brand-3': '#81bdb5',
  'brand-4': '#40a5af',
  'brand-5': '#f2eec1',
}

RGB Array

[127, 219, 206], [136, 209, 200], [129, 189, 181], [64, 165, 175], [242, 238, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7FDBCE, #88D1C8, #81BDB5, #40A5AF, #F2EEC1 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: #7fdbce; --color-2: #88d1c8; --color-3: #81bdb5; --color-4: #40a5af; --color-5: #f2eec1. 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 general-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