#76ACDB + #BECDE0 + #C5C4E3 + #D5BED2 + #DAB9CE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#76ACDB

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#76ACDB

RGB

rgb(118, 172, 219)

HSL

hsl(208, 58%, 66%)

HSB

hsb(208, 46%, 86%)

CMYK

cmyk(46%, 21%, 0%, 14%)

Oklch

oklch(72.5% 0.089 245.7)

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

#BECDE0

Azure · LightSteelBlue · Sky Blue

HEX

#BECDE0

RGB

rgb(190, 205, 224)

HSL

hsl(214, 35%, 81%)

HSB

hsb(214, 15%, 88%)

CMYK

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

Oklch

oklch(84.3% 0.031 254.3)

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

#C5C4E3

Wisteria · LightSteelBlue · Sky Blue

HEX

#C5C4E3

RGB

rgb(197, 196, 227)

HSL

hsl(242, 36%, 83%)

HSB

hsb(242, 14%, 89%)

CMYK

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

Oklch

oklch(83.1% 0.043 286.9)

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

#D5BED2

Mauve · LightGray · Lilac Purple

HEX

#D5BED2

RGB

rgb(213, 190, 210)

HSL

hsl(308, 21%, 79%)

HSB

hsb(308, 11%, 84%)

CMYK

cmyk(0%, 11%, 1%, 16%)

Oklch

oklch(82.7% 0.037 330.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#DAB9CE

Mauve · LightGray · Cherry Blossom

HEX

#DAB9CE

RGB

rgb(218, 185, 206)

HSL

hsl(322, 31%, 79%)

HSB

hsb(322, 15%, 85%)

CMYK

cmyk(0%, 15%, 6%, 15%)

Oklch

oklch(82.0% 0.047 339.8)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

76ACDB

DBA576

Analogous

76DBD7

76ACDB

7679DB

Triadic

76ACDB

DB76AC

ACDB76

Split-Comp.

76ACDB

DB7679

DBD776

Tetradic

76ACDB

D776DB

DBA576

79DB76

Contrast Matrix WCAG 2.1 Contrast

76ACDB	BECDE0	C5C4E3	D5BED2	DAB9CE
—	1.5 Fail	1.4 Fail	1.4 Fail	1.4 Fail
1.5 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.4 Fail	1.1 Fail	—	1.0 Fail	1.0 Fail
1.4 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.4 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

2.4Fail

1.6Fail

1.7Fail

1.8Fail

Black BG

8.7AAA

13.0AAA

12.4AAA

12.1AAA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8ED0

C4C5DB

C5C5DB

CBCBCD

CCCBC9

Deuteranopia

8A86CD

C4C3DA

C5C5DA

CCCECC

CED0C8

Tritanopia

79C7C5

BFD8D7

C5D6D4

D4C9C9

D8C5C4

Achromatopsia

A1A1A1

CBCBCB

C8C8C8

C7C7C7

C5C5C5

Shades & Tints Shades & Tints

#76ACDB

Dark

Light

#BECDE0

Dark

Light

#C5C4E3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #76acdb;
  --color-2: #becde0;
  --color-3: #c5c4e3;
  --color-4: #d5bed2;
  --color-5: #dab9ce;
}

SCSS

$color-1: #76acdb;
$color-2: #becde0;
$color-3: #c5c4e3;
$color-4: #d5bed2;
$color-5: #dab9ce;

TAILWIND

colors: {
  'brand-1': '#76acdb',
  'brand-2': '#becde0',
  'brand-3': '#c5c4e3',
  'brand-4': '#d5bed2',
  'brand-5': '#dab9ce',
}

RGB Array

[118, 172, 219], [190, 205, 224], [197, 196, 227], [213, 190, 210], [218, 185, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #76ACDB, #BECDE0, #C5C4E3, #D5BED2, #DAB9CE 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: #76acdb; --color-2: #becde0; --color-3: #c5c4e3; --color-4: #d5bed2; --color-5: #dab9ce. 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