#57C5CD + #A5C1C3 + #D4C9BA + #D8D6A8 + #BDF7A7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#57C5CD

Lake Blue · MediumTurquoise · Lake Green

HEX

#57C5CD

RGB

rgb(87, 197, 205)

HSL

hsl(184, 54%, 57%)

HSB

hsb(184, 58%, 80%)

CMYK

cmyk(58%, 4%, 0%, 20%)

Oklch

oklch(76.3% 0.100 201.8)

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

#A5C1C3

Sky Blue · Silver · Lake Green

HEX

#A5C1C3

RGB

rgb(165, 193, 195)

HSL

hsl(184, 20%, 71%)

HSB

hsb(184, 15%, 76%)

CMYK

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

Oklch

oklch(79.1% 0.030 201.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D4C9BA

Goose Yellow · Silver · Peach Orange

HEX

#D4C9BA

RGB

rgb(212, 201, 186)

HSL

hsl(35, 23%, 78%)

HSB

hsb(35, 12%, 83%)

CMYK

cmyk(0%, 5%, 12%, 17%)

Oklch

oklch(84.1% 0.024 75.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D8D6A8

Fresh Green · Wheat · Sunflower

HEX

#D8D6A8

RGB

rgb(216, 214, 168)

HSL

hsl(58, 38%, 75%)

HSB

hsb(58, 22%, 85%)

CMYK

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

Oklch

oklch(86.6% 0.061 105.5)

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

#BDF7A7

Emerald · LightGreen · Mint Green

HEX

#BDF7A7

RGB

rgb(189, 247, 167)

HSL

hsl(103, 83%, 81%)

HSB

hsb(103, 32%, 97%)

CMYK

cmyk(23%, 0%, 32%, 3%)

Oklch

oklch(91.7% 0.121 137.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57C5CD

CD5E56

Analogous

56CD99

57C5CD

5689CD

Triadic

57C5CD

CD56C5

C5CD56

Split-Comp.

57C5CD

CD5689

CD9956

Tetradic

57C5CD

9956CD

CD5E56

89CD56

Contrast Matrix WCAG 2.1 Contrast

57C5CD	A5C1C3	D4C9BA	D8D6A8	BDF7A7
—	1.1 Fail	1.3 Fail	1.4 Fail	1.7 Fail
1.1 Fail	—	1.2 Fail	1.3 Fail	1.5 Fail
1.3 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.7 Fail	1.5 Fail	1.3 Fail	1.2 Fail	—

White BG

2.0Fail

1.9Fail

1.6Fail

1.5Fail

1.2Fail

Black BG

10.3AAA

11.0AAA

12.9AAA

14.1AAA

17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8788CB

B1B1C3

CFCFBE

D7D7B3

D6D7BA

Deuteranopia

8078CB

B0ADC2

D0D1BF

D7D7B6

D3CEBF

Tritanopia

5DCAC9

A6C2C2

D3C0C1

D8BCBE

C0CACD

Achromatopsia

A5A5A5

B9B9B9

CBCBCB

D1D1D1

DDDDDD

Shades & Tints Shades & Tints

#57C5CD

Dark

Light

#A5C1C3

Dark

Light

#D4C9BA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57c5cd;
  --color-2: #a5c1c3;
  --color-3: #d4c9ba;
  --color-4: #d8d6a8;
  --color-5: #bdf7a7;
}

SCSS

$color-1: #57c5cd;
$color-2: #a5c1c3;
$color-3: #d4c9ba;
$color-4: #d8d6a8;
$color-5: #bdf7a7;

TAILWIND

colors: {
  'brand-1': '#57c5cd',
  'brand-2': '#a5c1c3',
  'brand-3': '#d4c9ba',
  'brand-4': '#d8d6a8',
  'brand-5': '#bdf7a7',
}

RGB Array

[87, 197, 205], [165, 193, 195], [212, 201, 186], [216, 214, 168], [189, 247, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #57C5CD, #A5C1C3, #D4C9BA, #D8D6A8, #BDF7A7 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: #57c5cd; --color-2: #a5c1c3; --color-3: #d4c9ba; --color-4: #d8d6a8; --color-5: #bdf7a7. 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