#71CCF3 + #85BBE5 + #97ACD9 + #AA9BCC + #BD8CBF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#71CCF3

Sky Blue · LightSkyBlue · Lake Green

HEX

#71CCF3

RGB

rgb(113, 204, 243)

HSL

hsl(198, 84%, 70%)

HSB

hsb(198, 53%, 95%)

CMYK

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

Oklch

oklch(80.3% 0.103 228.0)

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

#85BBE5

Sky Blue · SkyBlue · Cobalt Blue

HEX

#85BBE5

RGB

rgb(133, 187, 229)

HSL

hsl(206, 65%, 71%)

HSB

hsb(206, 42%, 90%)

CMYK

cmyk(42%, 18%, 0%, 10%)

Oklch

oklch(77.0% 0.083 242.5)

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

#97ACD9

Azure · LightSteelBlue · Cobalt Blue

HEX

#97ACD9

RGB

rgb(151, 172, 217)

HSL

hsl(221, 46%, 72%)

HSB

hsb(221, 30%, 85%)

CMYK

cmyk(30%, 21%, 0%, 15%)

Oklch

oklch(74.4% 0.069 265.2)

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

#AA9BCC

Wisteria · DarkGray · Cobalt Blue

HEX

#AA9BCC

RGB

rgb(170, 155, 204)

HSL

hsl(258, 32%, 70%)

HSB

hsb(258, 24%, 80%)

CMYK

cmyk(17%, 24%, 0%, 20%)

Oklch

oklch(72.0% 0.072 298.6)

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

#BD8CBF

Lilac · DarkGray · Lilac Purple

HEX

#BD8CBF

RGB

rgb(189, 140, 191)

HSL

hsl(298, 28%, 65%)

HSB

hsb(298, 27%, 75%)

CMYK

cmyk(1%, 27%, 0%, 25%)

Oklch

oklch(70.4% 0.091 325.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71CCF3

F39972

Analogous

72F3D9

71CCF3

728CF3

Triadic

71CCF3

F372CC

CCF372

Split-Comp.

71CCF3

F3728C

F3D972

Tetradic

71CCF3

D972F3

F39972

8CF372

Contrast Matrix WCAG 2.1 Contrast

71CCF3	85BBE5	97ACD9	AA9BCC	BD8CBF
—	1.1 Fail	1.3 Fail	1.4 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.8Fail

2.1Fail

2.3Fail

2.5Fail

2.7Fail

Black BG

11.6AAA

10.2AAA

9.2AAA

8.3AAA

7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9899EA

9C9DDB

A0A0CE

A4A3C0

A8A7B3

Deuteranopia

938CE7

9995D8

9F9DCB

A4A6BD

ABAEB0

Tritanopia

76E2E0

88D3D1

98C6C4

A9B7B5

BBA9A7

Achromatopsia

B5B5B5

B0B0B0

ABABAB

A5A5A5

A0A0A0

Shades & Tints Shades & Tints

#71CCF3

Dark

Light

#85BBE5

Dark

Light

#97ACD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71ccf3;
  --color-2: #85bbe5;
  --color-3: #97acd9;
  --color-4: #aa9bcc;
  --color-5: #bd8cbf;
}

SCSS

$color-1: #71ccf3;
$color-2: #85bbe5;
$color-3: #97acd9;
$color-4: #aa9bcc;
$color-5: #bd8cbf;

TAILWIND

colors: {
  'brand-1': '#71ccf3',
  'brand-2': '#85bbe5',
  'brand-3': '#97acd9',
  'brand-4': '#aa9bcc',
  'brand-5': '#bd8cbf',
}

RGB Array

[113, 204, 243], [133, 187, 229], [151, 172, 217], [170, 155, 204], [189, 140, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #71CCF3, #85BBE5, #97ACD9, #AA9BCC, #BD8CBF 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: #71ccf3; --color-2: #85bbe5; --color-3: #97acd9; --color-4: #aa9bcc; --color-5: #bd8cbf. 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