#73AFD4 + #8CBDD0 + #A7D5BF + #BBE7C1 + #D3F2D7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#73AFD4

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#73AFD4

RGB

rgb(115, 175, 212)

HSL

hsl(203, 53%, 64%)

HSB

hsb(203, 46%, 83%)

CMYK

cmyk(46%, 17%, 0%, 17%)

Oklch

oklch(72.7% 0.082 236.6)

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

#8CBDD0

Sky Blue · SkyBlue · Lake Green

HEX

#8CBDD0

RGB

rgb(140, 189, 208)

HSL

hsl(197, 42%, 68%)

HSB

hsb(197, 33%, 82%)

CMYK

cmyk(33%, 9%, 0%, 18%)

Oklch

oklch(77.0% 0.058 223.8)

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

#A7D5BF

Jade · Silver · Apple Green

HEX

#A7D5BF

RGB

rgb(167, 213, 191)

HSL

hsl(151, 35%, 75%)

HSB

hsb(151, 22%, 84%)

CMYK

cmyk(22%, 0%, 10%, 16%)

Oklch

oklch(83.4% 0.057 164.3)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#BBE7C1

Celadon · LightGray · Mint Green

HEX

#BBE7C1

RGB

rgb(187, 231, 193)

HSL

hsl(128, 48%, 82%)

HSB

hsb(128, 19%, 91%)

CMYK

cmyk(19%, 0%, 16%, 9%)

Oklch

oklch(88.7% 0.069 148.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#D3F2D7

Emerald · LightGray · Mint Green

HEX

#D3F2D7

RGB

rgb(211, 242, 215)

HSL

hsl(128, 54%, 89%)

HSB

hsb(128, 13%, 95%)

CMYK

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

Oklch

oklch(93.1% 0.049 148.9)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

73AFD4

D49873

Analogous

73D4C9

73AFD4

737ED4

Triadic

73AFD4

D473AF

AFD473

Split-Comp.

73AFD4

D4737E

D4C973

Tetradic

73AFD4

C973D4

D49873

7ED473

Contrast Matrix WCAG 2.1 Contrast

73AFD4	8CBDD0	A7D5BF	BBE7C1	D3F2D7
—	1.2 Fail	1.5 Fail	1.7 Fail	2.0 Fail
1.2 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
1.5 Fail	1.3 Fail	—	1.2 Fail	1.4 Fail
1.7 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.7 Fail	1.4 Fail	1.1 Fail	—

White BG

2.4Fail

2.0Fail

1.6Fail

1.4Fail

1.2Fail

Black BG

8.8AAA

10.3AAA

12.9AAA

15.3AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8ECB

A1A2CB

BBBBC4

CECECA

E0E1DE

Deuteranopia

8A85C9

9E9BCA

B8B5C6

CCC8CC

DFDCDF

Tritanopia

76C4C2

8EC8C7

A9C9C9

BDD1D3

D5E3E4

Achromatopsia

A1A1A1

B1B1B1

C5C5C5

D6D6D6

E6E6E6

Shades & Tints Shades & Tints

#73AFD4

Dark

Light

#8CBDD0

Dark

Light

#A7D5BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #73afd4;
  --color-2: #8cbdd0;
  --color-3: #a7d5bf;
  --color-4: #bbe7c1;
  --color-5: #d3f2d7;
}

SCSS

$color-1: #73afd4;
$color-2: #8cbdd0;
$color-3: #a7d5bf;
$color-4: #bbe7c1;
$color-5: #d3f2d7;

TAILWIND

colors: {
  'brand-1': '#73afd4',
  'brand-2': '#8cbdd0',
  'brand-3': '#a7d5bf',
  'brand-4': '#bbe7c1',
  'brand-5': '#d3f2d7',
}

RGB Array

[115, 175, 212], [140, 189, 208], [167, 213, 191], [187, 231, 193], [211, 242, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #73AFD4, #8CBDD0, #A7D5BF, #BBE7C1, #D3F2D7 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: #73afd4; --color-2: #8cbdd0; --color-3: #a7d5bf; --color-4: #bbe7c1; --color-5: #d3f2d7. 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