#5BD5D7 + #80DAD7 + #A6DFD9 + #CBE3D4 + #F0E8D2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5BD5D7

Lake Blue · MediumTurquoise · Lake Green

HEX

#5BD5D7

RGB

rgb(91, 213, 215)

HSL

hsl(181, 61%, 60%)

HSB

hsb(181, 58%, 84%)

CMYK

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

Oklch

oklch(80.5% 0.108 196.7)

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

#80DAD7

Jade · SkyBlue · Lake Green

HEX

#80DAD7

RGB

rgb(128, 218, 215)

HSL

hsl(178, 55%, 68%)

HSB

hsb(178, 41%, 85%)

CMYK

cmyk(41%, 0%, 1%, 15%)

Oklch

oklch(83.1% 0.087 192.8)

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

#A6DFD9

Jade · LightBlue · Glacier Blue

HEX

#A6DFD9

RGB

rgb(166, 223, 217)

HSL

hsl(174, 47%, 76%)

HSB

hsb(174, 26%, 87%)

CMYK

cmyk(26%, 0%, 3%, 13%)

Oklch

oklch(86.3% 0.059 188.1)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#CBE3D4

Celadon · LightGray · Mint Green

HEX

#CBE3D4

RGB

rgb(203, 227, 212)

HSL

hsl(143, 30%, 84%)

HSB

hsb(143, 11%, 89%)

CMYK

cmyk(11%, 0%, 7%, 11%)

Oklch

oklch(89.4% 0.033 158.3)

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

#F0E8D2

Goose Yellow · Beige · Lemon Cream

HEX

#F0E8D2

RGB

rgb(240, 232, 210)

HSL

hsl(44, 50%, 88%)

HSB

hsb(44, 13%, 94%)

CMYK

cmyk(0%, 3%, 13%, 6%)

Oklch

oklch(93.1% 0.030 90.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5BD5D7

D75D5B

Analogous

5BD79B

5BD5D7

5B97D7

Triadic

5BD5D7

D75BD5

D5D75B

Split-Comp.

5BD5D7

D75B97

D79B5B

Tetradic

5BD5D7

9B5BD7

D75D5B

97D75B

Contrast Matrix WCAG 2.1 Contrast

5BD5D7	80DAD7	A6DFD9	CBE3D4	F0E8D2
—	1.1 Fail	1.2 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.8Fail

1.6Fail

1.5Fail

1.4Fail

1.2Fail

Black BG

11.9AAA

12.9AAA

14.2AAA

15.5AAA

17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9091D7

A7A8D8

BFBFDA

D5D6D8

EDECD7

Deuteranopia

8980D6

A29BD8

BBB7DB

D4D2D8

EDEED9

Tritanopia

61D6D6

85D8D8

A9DCDC

CCDADB

F0DCDC

Achromatopsia

B1B1B1

BFBFBF

CDCDCD

DADADA

E8E8E8

Shades & Tints Shades & Tints

#5BD5D7

Dark

Light

#80DAD7

Dark

Light

#A6DFD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5bd5d7;
  --color-2: #80dad7;
  --color-3: #a6dfd9;
  --color-4: #cbe3d4;
  --color-5: #f0e8d2;
}

SCSS

$color-1: #5bd5d7;
$color-2: #80dad7;
$color-3: #a6dfd9;
$color-4: #cbe3d4;
$color-5: #f0e8d2;

TAILWIND

colors: {
  'brand-1': '#5bd5d7',
  'brand-2': '#80dad7',
  'brand-3': '#a6dfd9',
  'brand-4': '#cbe3d4',
  'brand-5': '#f0e8d2',
}

RGB Array

[91, 213, 215], [128, 218, 215], [166, 223, 217], [203, 227, 212], [240, 232, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5BD5D7, #80DAD7, #A6DFD9, #CBE3D4, #F0E8D2 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: #5bd5d7; --color-2: #80dad7; --color-3: #a6dfd9; --color-4: #cbe3d4; --color-5: #f0e8d2. 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