#21EBAE + #65DBB8 + #8FCFBB + #C1D6D0 + #DEDEDE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#21EBAE

Mineral Blue · MediumSpringGreen · Lake Green

HEX

#21EBAE

RGB

rgb(33, 235, 174)

HSL

hsl(162, 83%, 53%)

HSB

hsb(162, 86%, 92%)

CMYK

cmyk(86%, 0%, 26%, 8%)

Oklch

oklch(83.5% 0.170 165.4)

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

#65DBB8

Jade · MediumAquaMarine · Lake Green

HEX

#65DBB8

RGB

rgb(101, 219, 184)

HSL

hsl(162, 62%, 63%)

HSB

hsb(162, 54%, 86%)

CMYK

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

Oklch

oklch(81.4% 0.119 171.2)

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

#8FCFBB

Jade · MediumAquaMarine · Lake Green

HEX

#8FCFBB

RGB

rgb(143, 207, 187)

HSL

hsl(161, 40%, 69%)

HSB

hsb(161, 31%, 81%)

CMYK

cmyk(31%, 0%, 10%, 19%)

Oklch

oklch(80.6% 0.071 172.9)

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

#C1D6D0

Jade · LightGray · Glacier Blue

HEX

#C1D6D0

RGB

rgb(193, 214, 208)

HSL

hsl(163, 20%, 80%)

HSB

hsb(163, 10%, 84%)

CMYK

cmyk(10%, 0%, 3%, 16%)

Oklch

oklch(85.9% 0.024 176.7)

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

#DEDEDE

Plain White · LightGray · Cloud White

HEX

#DEDEDE

RGB

rgb(222, 222, 222)

HSL

hsl(0, 0%, 87%)

HSB

hsb(0, 0%, 87%)

CMYK

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

Oklch

oklch(90.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

21EBAE

EB245F

Analogous

24EB4B

21EBAE

24C3EB

Triadic

21EBAE

AF24EB

EBAF24

Split-Comp.

21EBAE

EB24C3

EB4B24

Tetradic

21EBAE

4B24EB

EB245F

C3EB24

Contrast Matrix WCAG 2.1 Contrast

21EBAE	65DBB8	8FCFBB	C1D6D0	DEDEDE
—	1.1 Fail	1.1 Fail	1.0 Fail	1.2 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.3 Fail
1.1 Fail	1.0 Fail	—	1.2 Fail	1.3 Fail
1.0 Fail	1.1 Fail	1.2 Fail	—	1.1 Fail
1.2 Fail	1.3 Fail	1.3 Fail	1.1 Fail	—

White BG

1.5Fail

1.7Fail

1.8Fail

1.5Fail

1.3Fail

Black BG

13.6AAA

12.4AAA

11.8AAA

13.8AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

787ABD

9899C0

ABABC0

CACAD1

DEDEDE

Deuteranopia

6D5EC0

9188C3

A7A2C1

C9C7D2

DEDEDE

Tritanopia

2BC8CB

6BC7C9

92C4C5

C2D3D3

DEDEDE

Achromatopsia

A8A8A8

B4B4B4

BABABA

CFCFCF

DEDEDE

Shades & Tints Shades & Tints

#21EBAE

Dark

Light

#65DBB8

Dark

Light

#8FCFBB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #21ebae;
  --color-2: #65dbb8;
  --color-3: #8fcfbb;
  --color-4: #c1d6d0;
  --color-5: #dedede;
}

SCSS

$color-1: #21ebae;
$color-2: #65dbb8;
$color-3: #8fcfbb;
$color-4: #c1d6d0;
$color-5: #dedede;

TAILWIND

colors: {
  'brand-1': '#21ebae',
  'brand-2': '#65dbb8',
  'brand-3': '#8fcfbb',
  'brand-4': '#c1d6d0',
  'brand-5': '#dedede',
}

RGB Array

[33, 235, 174], [101, 219, 184], [143, 207, 187], [193, 214, 208], [222, 222, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #21EBAE, #65DBB8, #8FCFBB, #C1D6D0, #DEDEDE 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: #21ebae; --color-2: #65dbb8; --color-3: #8fcfbb; --color-4: #c1d6d0; --color-5: #dedede. 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