#DBEDEF + #84D3DB + #849FDB + #9E84DB + #A556C7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DBEDEF

Sky Blue · Lavender · Glacier Blue

HEX

#DBEDEF

RGB

rgb(219, 237, 239)

HSL

hsl(186, 38%, 90%)

HSB

hsb(186, 8%, 94%)

CMYK

cmyk(8%, 1%, 0%, 6%)

Oklch

oklch(93.3% 0.019 204.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#84D3DB

Sky Blue · SkyBlue · Lake Green

HEX

#84D3DB

RGB

rgb(132, 211, 219)

HSL

hsl(186, 55%, 69%)

HSB

hsb(186, 40%, 86%)

CMYK

cmyk(40%, 4%, 0%, 14%)

Oklch

oklch(81.9% 0.078 204.0)

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

#849FDB

Azure · CornflowerBlue · Cobalt Blue

HEX

#849FDB

RGB

rgb(132, 159, 219)

HSL

hsl(221, 55%, 69%)

HSB

hsb(221, 40%, 86%)

CMYK

cmyk(40%, 27%, 0%, 14%)

Oklch

oklch(70.5% 0.094 265.4)

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

#9E84DB

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#9E84DB

RGB

rgb(158, 132, 219)

HSL

hsl(258, 55%, 69%)

HSB

hsb(258, 40%, 86%)

CMYK

cmyk(28%, 40%, 0%, 14%)

Oklch

oklch(67.2% 0.128 296.6)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#A556C7

Dark Plum · MediumOrchid · Violet

HEX

#A556C7

RGB

rgb(165, 86, 199)

HSL

hsl(282, 50%, 56%)

HSB

hsb(282, 57%, 78%)

CMYK

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

Oklch

oklch(59.4% 0.180 314.6)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBEDEF

EFDEDC

Analogous

DCEFE7

DBEDEF

DCE4EF

Triadic

DBEDEF

EFDCED

EDEFDC

Split-Comp.

DBEDEF

EFDCE4

EFE7DC

Tetradic

DBEDEF

E7DCEF

EFDEDC

E4EFDC

Contrast Matrix WCAG 2.1 Contrast

DBEDEF	84D3DB	849FDB	9E84DB	A556C7
—	1.4 Fail	2.2 Fail	2.6 Fail	3.7 AA Large
1.4 Fail	—	1.5 Fail	1.8 Fail	2.6 Fail
2.2 Fail	1.5 Fail	—	1.2 Fail	1.7 Fail
2.6 Fail	1.8 Fail	1.2 Fail	—	1.4 Fail
3.7 AA Large	2.6 Fail	1.7 Fail	1.4 Fail	—

White BG

1.2Fail

1.7Fail

2.6Fail

3.1AA Large

4.4AA Large

Black BG

17.4AAA

12.3AAA

8.0AAA

6.8AA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3EF

A6A7D9

9090CC

9393C6

8382AC

Deuteranopia

E2E0EE

A29CD9

8E8CC9

9496C1

878DA5

Tritanopia

DCEEEE

88D8D7

85C1BF

9DB5B2

A19691

Achromatopsia

E8E8E8

BCBCBC

9E9E9E

969696

7B7B7B

Shades & Tints Shades & Tints

#DBEDEF

Dark

Light

#84D3DB

Dark

Light

#849FDB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbedef;
  --color-2: #84d3db;
  --color-3: #849fdb;
  --color-4: #9e84db;
  --color-5: #a556c7;
}

SCSS

$color-1: #dbedef;
$color-2: #84d3db;
$color-3: #849fdb;
$color-4: #9e84db;
$color-5: #a556c7;

TAILWIND

colors: {
  'brand-1': '#dbedef',
  'brand-2': '#84d3db',
  'brand-3': '#849fdb',
  'brand-4': '#9e84db',
  'brand-5': '#a556c7',
}

RGB Array

[219, 237, 239], [132, 211, 219], [132, 159, 219], [158, 132, 219], [165, 86, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBEDEF, #84D3DB, #849FDB, #9E84DB, #A556C7 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: #dbedef; --color-2: #84d3db; --color-3: #849fdb; --color-4: #9e84db; --color-5: #a556c7. 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