#53ADA0 + #5FCBB3 + #8ECFB7 + #CFE6BC + #FBF5C3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#53ADA0

Mineral Blue · CadetBlue · Mint Ice

HEX

#53ADA0

RGB

rgb(83, 173, 160)

HSL

hsl(171, 35%, 50%)

HSB

hsb(171, 52%, 68%)

CMYK

cmyk(52%, 0%, 8%, 32%)

Oklch

oklch(68.9% 0.089 183.0)

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

#5FCBB3

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#5FCBB3

RGB

rgb(95, 203, 179)

HSL

hsl(167, 51%, 58%)

HSB

hsb(167, 53%, 80%)

CMYK

cmyk(53%, 0%, 12%, 20%)

Oklch

oklch(77.2% 0.106 176.7)

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

#8ECFB7

Jade · MediumAquaMarine · Apple Green

HEX

#8ECFB7

RGB

rgb(142, 207, 183)

HSL

hsl(158, 40%, 68%)

HSB

hsb(158, 31%, 81%)

CMYK

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

Oklch

oklch(80.4% 0.075 169.4)

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

#CFE6BC

Celadon · LightGray · Mint Green

HEX

#CFE6BC

RGB

rgb(207, 230, 188)

HSL

hsl(93, 46%, 82%)

HSB

hsb(93, 18%, 90%)

CMYK

cmyk(10%, 0%, 18%, 10%)

Oklch

oklch(89.7% 0.061 131.0)

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

#FBF5C3

Fresh Green · Bisque · Lemon Cream

HEX

#FBF5C3

RGB

rgb(251, 245, 195)

HSL

hsl(54, 88%, 87%)

HSB

hsb(54, 22%, 98%)

CMYK

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

Oklch

oklch(96.3% 0.065 101.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

53ADA0

AC5360

Analogous

53AC72

53ADA0

538DAC

Triadic

53ADA0

9F53AC

AC9F53

Split-Comp.

53ADA0

AC538D

AC7253

Tetradic

53ADA0

7253AC

AC5360

8DAC53

Contrast Matrix WCAG 2.1 Contrast

53ADA0	5FCBB3	8ECFB7	CFE6BC	FBF5C3
—	1.4 Fail	1.5 Fail	2.0 Fail	2.4 Fail
1.4 Fail	—	1.1 Fail	1.5 Fail	1.8 Fail
1.5 Fail	1.1 Fail	—	1.3 Fail	1.6 Fail
2.0 Fail	1.5 Fail	1.3 Fail	—	1.2 Fail
2.4 Fail	1.8 Fail	1.6 Fail	1.2 Fail	—

White BG

2.7Fail

2.0Fail

1.8Fail

1.3Fail

1.1Fail

Black BG

7.9AAA

10.7AAA

11.8AAA

15.7AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7BA3

8E8FB9

AAABBD

D9D9C6

F8F8CF

Deuteranopia

756EA4

887FBA

A6A2BE

D8D6C9

F9F9D2

Tritanopia

58A6A6

64BDBE

91C1C2

D0CED0

FBD9DB

Achromatopsia

919191

A8A8A8

B9B9B9

DADADA

F1F1F1

Shades & Tints Shades & Tints

#53ADA0

Dark

Light

#5FCBB3

Dark

Light

#8ECFB7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #53ada0;
  --color-2: #5fcbb3;
  --color-3: #8ecfb7;
  --color-4: #cfe6bc;
  --color-5: #fbf5c3;
}

SCSS

$color-1: #53ada0;
$color-2: #5fcbb3;
$color-3: #8ecfb7;
$color-4: #cfe6bc;
$color-5: #fbf5c3;

TAILWIND

colors: {
  'brand-1': '#53ada0',
  'brand-2': '#5fcbb3',
  'brand-3': '#8ecfb7',
  'brand-4': '#cfe6bc',
  'brand-5': '#fbf5c3',
}

RGB Array

[83, 173, 160], [95, 203, 179], [142, 207, 183], [207, 230, 188], [251, 245, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #53ADA0, #5FCBB3, #8ECFB7, #CFE6BC, #FBF5C3 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: #53ada0; --color-2: #5fcbb3; --color-3: #8ecfb7; --color-4: #cfe6bc; --color-5: #fbf5c3. 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