#93A5B1 + #7EC1AF + #5CCBA1 + #B4A0D1 + #D9A4C2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#93A5B1

Sky Blue · DarkGray · Cobalt Blue

HEX

#93A5B1

RGB

rgb(147, 165, 177)

HSL

hsl(204, 16%, 64%)

HSB

hsb(204, 17%, 69%)

CMYK

cmyk(17%, 7%, 0%, 31%)

Oklch

oklch(71.2% 0.027 237.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#7EC1AF

Jade · MediumAquaMarine · Lake Green

HEX

#7EC1AF

RGB

rgb(126, 193, 175)

HSL

hsl(164, 35%, 63%)

HSB

hsb(164, 35%, 76%)

CMYK

cmyk(35%, 0%, 9%, 24%)

Oklch

oklch(76.1% 0.073 175.5)

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

#5CCBA1

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#5CCBA1

RGB

rgb(92, 203, 161)

HSL

hsl(157, 52%, 58%)

HSB

hsb(157, 55%, 80%)

CMYK

cmyk(55%, 0%, 21%, 20%)

Oklch

oklch(76.6% 0.120 165.8)

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

#B4A0D1

Wisteria · Silver · Lilac Purple

HEX

#B4A0D1

RGB

rgb(180, 160, 209)

HSL

hsl(264, 35%, 72%)

HSB

hsb(264, 23%, 82%)

CMYK

cmyk(14%, 23%, 0%, 18%)

Oklch

oklch(74.0% 0.073 303.3)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#D9A4C2

Mauve · Silver · Rose Pink

HEX

#D9A4C2

RGB

rgb(217, 164, 194)

HSL

hsl(326, 41%, 75%)

HSB

hsb(326, 24%, 85%)

CMYK

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

Oklch

oklch(77.7% 0.074 344.0)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

93A5B1

B2A095

Analogous

95B2AF

93A5B1

9597B2

Triadic

93A5B1

B295A6

A6B295

Split-Comp.

93A5B1

B29597

B2AF95

Tetradic

93A5B1

AF95B2

B2A095

97B295

Contrast Matrix WCAG 2.1 Contrast

93A5B1	7EC1AF	5CCBA1	B4A0D1	D9A4C2
—	1.2 Fail	1.3 Fail	1.1 Fail	1.2 Fail
1.2 Fail	—	1.0 Fail	1.1 Fail	1.0 Fail
1.3 Fail	1.0 Fail	—	1.2 Fail	1.0 Fail
1.1 Fail	1.1 Fail	1.2 Fail	—	1.1 Fail
1.2 Fail	1.0 Fail	1.0 Fail	1.1 Fail	—

White BG

2.5Fail

2.1Fail

2.0Fail

2.4Fail

2.1Fail

Black BG

8.3AAA

10.1AAA

10.5AAA

8.9AAA

10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9BAE

9B9CB3

8C8DAB

ABABC5

C2C2BB

Deuteranopia

9A98AD

9792B4

867DAE

ADAEC2

C5C9B9

Tritanopia

94ACAB

81B7B8

62B3B5

B3BCBA

D6B5B4

Achromatopsia

A1A1A1

ABABAB

A5A5A5

ACACAC

B7B7B7

Shades & Tints Shades & Tints

#93A5B1

Dark

Light

#7EC1AF

Dark

Light

#5CCBA1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #93a5b1;
  --color-2: #7ec1af;
  --color-3: #5ccba1;
  --color-4: #b4a0d1;
  --color-5: #d9a4c2;
}

SCSS

$color-1: #93a5b1;
$color-2: #7ec1af;
$color-3: #5ccba1;
$color-4: #b4a0d1;
$color-5: #d9a4c2;

TAILWIND

colors: {
  'brand-1': '#93a5b1',
  'brand-2': '#7ec1af',
  'brand-3': '#5ccba1',
  'brand-4': '#b4a0d1',
  'brand-5': '#d9a4c2',
}

RGB Array

[147, 165, 177], [126, 193, 175], [92, 203, 161], [180, 160, 209], [217, 164, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #93A5B1, #7EC1AF, #5CCBA1, #B4A0D1, #D9A4C2 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: #93a5b1; --color-2: #7ec1af; --color-3: #5ccba1; --color-4: #b4a0d1; --color-5: #d9a4c2. 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