#5DC7BC + #A5C7B4 + #C9C6AF + #E3C6B1 + #F5C1AB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5DC7BC

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#5DC7BC

RGB

rgb(93, 199, 188)

HSL

hsl(174, 49%, 57%)

HSB

hsb(174, 53%, 78%)

CMYK

cmyk(53%, 0%, 6%, 22%)

Oklch

oklch(76.4% 0.099 186.2)

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

#A5C7B4

Celadon · Silver · Apple Green

HEX

#A5C7B4

RGB

rgb(165, 199, 180)

HSL

hsl(146, 23%, 71%)

HSB

hsb(146, 17%, 78%)

CMYK

cmyk(17%, 0%, 10%, 22%)

Oklch

oklch(79.9% 0.045 160.7)

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

#C9C6AF

Fresh Green · Silver · Sunflower

HEX

#C9C6AF

RGB

rgb(201, 198, 175)

HSL

hsl(53, 19%, 74%)

HSB

hsb(53, 13%, 79%)

CMYK

cmyk(0%, 1%, 13%, 21%)

Oklch

oklch(82.3% 0.031 101.0)

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

#E3C6B1

Apricot · Wheat · Peach Orange

HEX

#E3C6B1

RGB

rgb(227, 198, 177)

HSL

hsl(25, 47%, 79%)

HSB

hsb(25, 22%, 89%)

CMYK

cmyk(0%, 13%, 22%, 11%)

Oklch

oklch(84.6% 0.044 58.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F5C1AB

Apricot · LightPink · Peach Orange

HEX

#F5C1AB

RGB

rgb(245, 193, 171)

HSL

hsl(18, 79%, 82%)

HSB

hsb(18, 30%, 96%)

CMYK

cmyk(0%, 21%, 30%, 4%)

Oklch

oklch(85.2% 0.067 44.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5DC7BC

C75C66

Analogous

5CC787

5DC7BC

5C9CC7

Triadic

5DC7BC

BC5CC7

C7BC5C

Split-Comp.

5DC7BC

C75C9C

C7875C

Tetradic

5DC7BC

875CC7

C75C66

9CC75C

Contrast Matrix WCAG 2.1 Contrast

5DC7BC	A5C7B4	C9C6AF	E3C6B1	F5C1AB
—	1.1 Fail	1.2 Fail	1.3 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.3 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

2.0Fail

1.8Fail

1.7Fail

1.6Fail

Black BG

10.4AAA

11.4AAA

12.2AAA

13.0AAA

13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8CBF

B4B4B9

C8C8B5

D6D6B6

DEDEB0

Deuteranopia

857DBF

B2AFBA

C8C8B6

D8DAB7

E2E5B2

Tritanopia

62C1C1

A7BCBD

C9B9BA

E2BABB

F2B5B5

Achromatopsia

A6A6A6

BBBBBB

C4C4C4

CCCCCC

CECECE

Shades & Tints Shades & Tints

#5DC7BC

Dark

Light

#A5C7B4

Dark

Light

#C9C6AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5dc7bc;
  --color-2: #a5c7b4;
  --color-3: #c9c6af;
  --color-4: #e3c6b1;
  --color-5: #f5c1ab;
}

SCSS

$color-1: #5dc7bc;
$color-2: #a5c7b4;
$color-3: #c9c6af;
$color-4: #e3c6b1;
$color-5: #f5c1ab;

TAILWIND

colors: {
  'brand-1': '#5dc7bc',
  'brand-2': '#a5c7b4',
  'brand-3': '#c9c6af',
  'brand-4': '#e3c6b1',
  'brand-5': '#f5c1ab',
}

RGB Array

[93, 199, 188], [165, 199, 180], [201, 198, 175], [227, 198, 177], [245, 193, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5DC7BC, #A5C7B4, #C9C6AF, #E3C6B1, #F5C1AB 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: #5dc7bc; --color-2: #a5c7b4; --color-3: #c9c6af; --color-4: #e3c6b1; --color-5: #f5c1ab. 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