#8D99E9 + #79B2E2 + #8BC7D3 + #C4CCCE + #D7CAD1 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#8D99E9

Azure · CornflowerBlue · Cobalt Blue

HEX

#8D99E9

RGB

rgb(141, 153, 233)

HSL

hsl(232, 68%, 73%)

HSB

hsb(232, 39%, 91%)

CMYK

cmyk(39%, 34%, 0%, 9%)

Oklch

oklch(70.6% 0.118 276.4)

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

#79B2E2

Sky Blue · SkyBlue · Cobalt Blue

HEX

#79B2E2

RGB

rgb(121, 178, 226)

HSL

hsl(207, 64%, 68%)

HSB

hsb(207, 46%, 89%)

CMYK

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

Oklch

oklch(74.3% 0.092 244.9)

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

#8BC7D3

Sky Blue · SkyBlue · Lake Green

HEX

#8BC7D3

RGB

rgb(139, 199, 211)

HSL

hsl(190, 45%, 69%)

HSB

hsb(190, 34%, 83%)

CMYK

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

Oklch

oklch(79.3% 0.064 211.4)

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

#C4CCCE

Sky Blue · LightGray · Pearl Gray

HEX

#C4CCCE

RGB

rgb(196, 204, 206)

HSL

hsl(192, 9%, 79%)

HSB

hsb(192, 5%, 81%)

CMYK

cmyk(5%, 1%, 0%, 19%)

Oklch

oklch(84.0% 0.009 214.3)

Traditional「Sky Blue」· Paint「Pearl Gray」· Creative Silver Lining

#D7CAD1

Mauve · LightGray · Cherry Blossom

HEX

#D7CAD1

RGB

rgb(215, 202, 209)

HSL

hsl(328, 14%, 82%)

HSB

hsb(328, 6%, 84%)

CMYK

cmyk(0%, 6%, 3%, 16%)

Oklch

oklch(85.2% 0.017 343.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D99E9

E9DC8B

Analogous

8BC7E9

8D99E9

AE8BE9

Triadic

8D99E9

E98B98

98E98B

Split-Comp.

8D99E9

E9AE8B

C7E98B

Tetradic

8D99E9

E98BC7

E9DC8B

8BE9AE

Contrast Matrix WCAG 2.1 Contrast

8D99E9	79B2E2	8BC7D3	C4CCCE	D7CAD1
—	1.2 Fail	1.4 Fail	1.6 Fail	1.7 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.4 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.6 Fail	1.4 Fail	1.1 Fail	—	1.0 Fail
1.7 Fail	1.4 Fail	1.2 Fail	1.0 Fail	—

White BG

2.7Fail

2.3Fail

1.9Fail

1.6Fail

Black BG

7.9AAA

9.3AAA

11.2AAA

12.9AAA

13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9292D6

A5A6D0

C7C8CE

D1D1CF

Deuteranopia

9291D1

8E8AD4

A29DCF

C7C6CD

D2D3CF

Tritanopia

8EC6C3

7CCDCB

8ECECD

C4CDCD

D6CECE

Achromatopsia

9F9F9F

A6A6A6

B6B6B6

CACACA

CFCFCF

Shades & Tints Shades & Tints

#8D99E9

Dark

Light

#79B2E2

Dark

Light

#8BC7D3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d99e9;
  --color-2: #79b2e2;
  --color-3: #8bc7d3;
  --color-4: #c4ccce;
  --color-5: #d7cad1;
}

SCSS

$color-1: #8d99e9;
$color-2: #79b2e2;
$color-3: #8bc7d3;
$color-4: #c4ccce;
$color-5: #d7cad1;

TAILWIND

colors: {
  'brand-1': '#8d99e9',
  'brand-2': '#79b2e2',
  'brand-3': '#8bc7d3',
  'brand-4': '#c4ccce',
  'brand-5': '#d7cad1',
}

RGB Array

[141, 153, 233], [121, 178, 226], [139, 199, 211], [196, 204, 206], [215, 202, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #8D99E9, #79B2E2, #8BC7D3, #C4CCCE, #D7CAD1 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: #8d99e9; --color-2: #79b2e2; --color-3: #8bc7d3; --color-4: #c4ccce; --color-5: #d7cad1. 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 nature-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