#DEDADB + #7BD5DD + #71C8F3 + #8A9CA6 + #9DB9BD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DEDADB

Plain White · LightGray · Cloud White

HEX

#DEDADB

RGB

rgb(222, 218, 219)

HSL

hsl(345, 6%, 86%)

HSB

hsb(345, 2%, 87%)

CMYK

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

Oklch

oklch(89.2% 0.005 0.0)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#7BD5DD

Sky Blue · SkyBlue · Lake Green

HEX

#7BD5DD

RGB

rgb(123, 213, 221)

HSL

hsl(185, 59%, 67%)

HSB

hsb(185, 44%, 87%)

CMYK

cmyk(44%, 4%, 0%, 13%)

Oklch

oklch(82.0% 0.087 203.0)

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

#71C8F3

Sky Blue · LightSkyBlue · Cobalt Blue

HEX

#71C8F3

RGB

rgb(113, 200, 243)

HSL

hsl(200, 84%, 70%)

HSB

hsb(200, 53%, 95%)

CMYK

cmyk(53%, 18%, 0%, 5%)

Oklch

oklch(79.4% 0.104 231.6)

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

#8A9CA6

Slate Blue · LightSlateGray · Navy Blue

HEX

#8A9CA6

RGB

rgb(138, 156, 166)

HSL

hsl(201, 14%, 60%)

HSB

hsb(201, 17%, 65%)

CMYK

cmyk(17%, 6%, 0%, 35%)

Oklch

oklch(68.2% 0.025 232.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#9DB9BD

Sky Blue · DarkGray · Lake Green

HEX

#9DB9BD

RGB

rgb(157, 185, 189)

HSL

hsl(188, 20%, 68%)

HSB

hsb(188, 17%, 74%)

CMYK

cmyk(17%, 2%, 0%, 26%)

Oklch

oklch(76.6% 0.031 207.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEDADB

D9DDDC

Analogous

DDD9DC

DEDADB

DDDAD9

Triadic

DEDADB

DADDD9

D9DADD

Split-Comp.

DEDADB

D9DDDA

D9DCDD

Tetradic

DEDADB

DCDDD9

D9DDDC

DAD9DD

Contrast Matrix WCAG 2.1 Contrast

DEDADB	7BD5DD	71C8F3	8A9CA6	9DB9BD
—	1.2 Fail	1.3 Fail	2.1 Fail	1.5 Fail
1.2 Fail	—	1.1 Fail	1.7 Fail	1.2 Fail
1.3 Fail	1.1 Fail	—	1.5 Fail	1.1 Fail
2.1 Fail	1.7 Fail	1.5 Fail	—	1.4 Fail
1.5 Fail	1.2 Fail	1.1 Fail	1.4 Fail	—

White BG

1.4Fail

1.7Fail

1.9Fail

2.8Fail

2.1Fail

Black BG

15.2AAA

12.4AAA

11.3AAA

7.4AAA

10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCDB

A2A3DB

9797E9

9292A4

A9A9BC

Deuteranopia

DDDDDB

9D96DB

928BE6

918FA3

A8A5BC

Tritanopia

DEDBDB

80DAD9

75E0DF

8BA2A1

9EBBBB

Achromatopsia

DBDBDB

BBBBBB

B3B3B3

989898

B1B1B1

Shades & Tints Shades & Tints

#DEDADB

Dark

Light

#7BD5DD

Dark

Light

#71C8F3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dedadb;
  --color-2: #7bd5dd;
  --color-3: #71c8f3;
  --color-4: #8a9ca6;
  --color-5: #9db9bd;
}

SCSS

$color-1: #dedadb;
$color-2: #7bd5dd;
$color-3: #71c8f3;
$color-4: #8a9ca6;
$color-5: #9db9bd;

TAILWIND

colors: {
  'brand-1': '#dedadb',
  'brand-2': '#7bd5dd',
  'brand-3': '#71c8f3',
  'brand-4': '#8a9ca6',
  'brand-5': '#9db9bd',
}

RGB Array

[222, 218, 219], [123, 213, 221], [113, 200, 243], [138, 156, 166], [157, 185, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEDADB, #7BD5DD, #71C8F3, #8A9CA6, #9DB9BD 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: #dedadb; --color-2: #7bd5dd; --color-3: #71c8f3; --color-4: #8a9ca6; --color-5: #9db9bd. 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