#857D91 + #5093AB + #84C8E0 + #C796EB + #DADFE0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#857D91

Deep Indigo · Gray · Warm Gray

HEX

#857D91

RGB

rgb(133, 125, 145)

HSL

hsl(264, 8%, 53%)

HSB

hsb(264, 14%, 57%)

CMYK

cmyk(8%, 14%, 0%, 43%)

Oklch

oklch(60.4% 0.031 303.6)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#5093AB

Slate Blue · CadetBlue · Mint Ice

HEX

#5093AB

RGB

rgb(80, 147, 171)

HSL

hsl(196, 36%, 49%)

HSB

hsb(196, 53%, 67%)

CMYK

cmyk(53%, 14%, 0%, 33%)

Oklch

oklch(62.8% 0.077 223.5)

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

#84C8E0

Sky Blue · SkyBlue · Lake Green

HEX

#84C8E0

RGB

rgb(132, 200, 224)

HSL

hsl(196, 60%, 70%)

HSB

hsb(196, 41%, 88%)

CMYK

cmyk(41%, 11%, 0%, 12%)

Oklch

oklch(79.6% 0.076 222.3)

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

#C796EB

Lilac · Violet · Lilac Purple

HEX

#C796EB

RGB

rgb(199, 150, 235)

HSL

hsl(275, 68%, 75%)

HSB

hsb(275, 36%, 92%)

CMYK

cmyk(15%, 36%, 0%, 8%)

Oklch

oklch(75.0% 0.129 310.0)

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

#DADFE0

Sky Blue · LightGray · Cloud White

HEX

#DADFE0

RGB

rgb(218, 223, 224)

HSL

hsl(190, 9%, 87%)

HSB

hsb(190, 3%, 88%)

CMYK

cmyk(3%, 0%, 0%, 12%)

Oklch

oklch(90.0% 0.006 211.0)

Traditional「Sky Blue」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

857D91

89917E

Analogous

7E7F91

857D91

8F7E91

Triadic

857D91

91857E

7E9185

Split-Comp.

857D91

918F7E

7F917E

Tetradic

857D91

917E7F

89917E

7E918F

Contrast Matrix WCAG 2.1 Contrast

857D91	5093AB	84C8E0	C796EB	DADFE0
—	1.1 Fail	2.1 Fail	1.7 Fail	2.9 Fail
1.1 Fail	—	1.9 Fail	1.5 Fail	2.6 Fail
2.1 Fail	1.9 Fail	—	1.3 Fail	1.4 Fail
1.7 Fail	1.5 Fail	1.3 Fail	—	1.7 Fail
2.9 Fail	2.6 Fail	1.4 Fail	1.7 Fail	—

White BG

3.9AA Large

3.4AA Large

1.9Fail

2.3Fail

1.3Fail

Black BG

5.3AA

6.1AA

11.3AAA

9.0AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82818C

6D6EA5

A1A2DA

B2B1D6

DCDCE0

Deuteranopia

82838B

6964A4

9E98D9

B5B8D2

DCDCE0

Tritanopia

858888

53A1A0

87D6D5

C5C6C3

DAE0E0

Achromatopsia

828282

B6B6B6

AEAEAE

DEDEDE

Shades & Tints Shades & Tints

#857D91

Dark

Light

#5093AB

Dark

Light

#84C8E0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #857d91;
  --color-2: #5093ab;
  --color-3: #84c8e0;
  --color-4: #c796eb;
  --color-5: #dadfe0;
}

SCSS

$color-1: #857d91;
$color-2: #5093ab;
$color-3: #84c8e0;
$color-4: #c796eb;
$color-5: #dadfe0;

TAILWIND

colors: {
  'brand-1': '#857d91',
  'brand-2': '#5093ab',
  'brand-3': '#84c8e0',
  'brand-4': '#c796eb',
  'brand-5': '#dadfe0',
}

RGB Array

[133, 125, 145], [80, 147, 171], [132, 200, 224], [199, 150, 235], [218, 223, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #857D91, #5093AB, #84C8E0, #C796EB, #DADFE0 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: #857d91; --color-2: #5093ab; --color-3: #84c8e0; --color-4: #c796eb; --color-5: #dadfe0. 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