#52ACA3 + #76C6A3 + #BCD3A7 + #EFDFAB + #FFF2CA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#52ACA3

Mineral Blue · CadetBlue · Mint Ice

HEX

#52ACA3

RGB

rgb(82, 172, 163)

HSL

hsl(174, 35%, 50%)

HSB

hsb(174, 52%, 67%)

CMYK

cmyk(52%, 0%, 5%, 33%)

Oklch

oklch(68.7% 0.087 186.7)

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

#76C6A3

Jade · MediumAquaMarine · Apple Green

HEX

#76C6A3

RGB

rgb(118, 198, 163)

HSL

hsl(154, 41%, 62%)

HSB

hsb(154, 40%, 78%)

CMYK

cmyk(40%, 0%, 18%, 22%)

Oklch

oklch(76.5% 0.095 164.3)

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

#BCD3A7

Celadon · Silver · Apple Green

HEX

#BCD3A7

RGB

rgb(188, 211, 167)

HSL

hsl(91, 33%, 74%)

HSB

hsb(91, 21%, 83%)

CMYK

cmyk(11%, 0%, 21%, 17%)

Oklch

oklch(83.8% 0.065 130.2)

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

#EFDFAB

Goose Yellow · Wheat · Lemon Cream

HEX

#EFDFAB

RGB

rgb(239, 223, 171)

HSL

hsl(46, 68%, 80%)

HSB

hsb(46, 28%, 94%)

CMYK

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

Oklch

oklch(90.4% 0.070 93.0)

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

#FFF2CA

Goose Yellow · Bisque · Lemon Cream

HEX

#FFF2CA

RGB

rgb(255, 242, 202)

HSL

hsl(45, 100%, 90%)

HSB

hsb(45, 21%, 100%)

CMYK

cmyk(0%, 5%, 21%, 0%)

Oklch

oklch(96.1% 0.054 92.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

52ACA3

AC535C

Analogous

53AC77

52ACA3

5388AC

Triadic

52ACA3

A353AC

ACA353

Split-Comp.

52ACA3

AC5388

AC7753

Tetradic

52ACA3

7753AC

AC535C

88AC53

Contrast Matrix WCAG 2.1 Contrast

52ACA3	76C6A3	BCD3A7	EFDFAB	FFF2CA
—	1.3 Fail	1.7 Fail	2.0 Fail	2.4 Fail
1.3 Fail	—	1.3 Fail	1.5 Fail	1.8 Fail
1.7 Fail	1.3 Fail	—	1.2 Fail	1.4 Fail
2.0 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.4 Fail	1.8 Fail	1.4 Fail	1.2 Fail	—

White BG

2.7Fail

2.0Fail

1.6Fail

1.3Fail

1.1Fail

Black BG

7.8AAA

10.4AAA

13.0AAA

15.8AAA

18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797AA5

9999AB

C6C6B2

E8E8B8

F9F9D4

Deuteranopia

746DA6

948EAE

C5C3B4

E9EABB

FAFBD6

Tritanopia

56A7A7

7AB2B4

BDBABC

EEC2C4

FEDBDD

Achromatopsia

909090

AAAAAA

C7C7C7

DEDEDE

F1F1F1

Shades & Tints Shades & Tints

#52ACA3

Dark

Light

#76C6A3

Dark

Light

#BCD3A7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #52aca3;
  --color-2: #76c6a3;
  --color-3: #bcd3a7;
  --color-4: #efdfab;
  --color-5: #fff2ca;
}

SCSS

$color-1: #52aca3;
$color-2: #76c6a3;
$color-3: #bcd3a7;
$color-4: #efdfab;
$color-5: #fff2ca;

TAILWIND

colors: {
  'brand-1': '#52aca3',
  'brand-2': '#76c6a3',
  'brand-3': '#bcd3a7',
  'brand-4': '#efdfab',
  'brand-5': '#fff2ca',
}

RGB Array

[82, 172, 163], [118, 198, 163], [188, 211, 167], [239, 223, 171], [255, 242, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #52ACA3, #76C6A3, #BCD3A7, #EFDFAB, #FFF2CA 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: #52aca3; --color-2: #76c6a3; --color-3: #bcd3a7; --color-4: #efdfab; --color-5: #fff2ca. 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