#A9C4D3 + #B1CBDF + #C1D0E3 + #D4D4E4 + #DED8EC · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#A9C4D3

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#A9C4D3

RGB

rgb(169, 196, 211)

HSL

hsl(201, 32%, 75%)

HSB

hsb(201, 20%, 83%)

CMYK

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

Oklch

oklch(80.5% 0.036 232.2)

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

#B1CBDF

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#B1CBDF

RGB

rgb(177, 203, 223)

HSL

hsl(206, 42%, 78%)

HSB

hsb(206, 21%, 87%)

CMYK

cmyk(21%, 9%, 0%, 13%)

Oklch

oklch(82.9% 0.040 241.1)

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

#C1D0E3

Azure · LightSteelBlue · Sky Blue

HEX

#C1D0E3

RGB

rgb(193, 208, 227)

HSL

hsl(214, 38%, 82%)

HSB

hsb(214, 15%, 89%)

CMYK

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

Oklch

oklch(85.2% 0.031 254.3)

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

#D4D4E4

Wisteria · LightGray · Sky Blue

HEX

#D4D4E4

RGB

rgb(212, 212, 228)

HSL

hsl(240, 23%, 86%)

HSB

hsb(240, 7%, 89%)

CMYK

cmyk(7%, 7%, 0%, 11%)

Oklch

oklch(87.5% 0.022 285.9)

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

#DED8EC

Wisteria · Lavender · Sky Blue

HEX

#DED8EC

RGB

rgb(222, 216, 236)

HSL

hsl(258, 34%, 89%)

HSB

hsb(258, 8%, 93%)

CMYK

cmyk(6%, 8%, 0%, 7%)

Oklch

oklch(89.3% 0.028 299.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A9C4D3

D4B9AB

Analogous

ABD4CE

A9C4D3

ABB1D4

Triadic

A9C4D3

D4ABC5

C5D4AB

Split-Comp.

A9C4D3

D4ABB1

D4CEAB

Tetradic

A9C4D3

CEABD4

D4B9AB

B1D4AB

Contrast Matrix WCAG 2.1 Contrast

A9C4D3	B1CBDF	C1D0E3	D4D4E4	DED8EC
—	1.1 Fail	1.2 Fail	1.2 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.8Fail

1.7Fail

1.6Fail

1.5Fail

1.4Fail

Black BG

11.5AAA

12.5AAA

13.4AAA

14.3AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5CF

BCBCDA

C7C8DE

D4D4E0

DBDBE7

Deuteranopia

B3B1CF

BBB9D9

C7C6DD

D4D4DF

DCDCE6

Tritanopia

AACDCC

B2D6D6

C2DBDA

D4DDDC

DEE3E3

Achromatopsia

BEBEBE

C6C6C6

CECECE

D6D6D6

DCDCDC

Shades & Tints Shades & Tints

#A9C4D3

Dark

Light

#B1CBDF

Dark

Light

#C1D0E3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a9c4d3;
  --color-2: #b1cbdf;
  --color-3: #c1d0e3;
  --color-4: #d4d4e4;
  --color-5: #ded8ec;
}

SCSS

$color-1: #a9c4d3;
$color-2: #b1cbdf;
$color-3: #c1d0e3;
$color-4: #d4d4e4;
$color-5: #ded8ec;

TAILWIND

colors: {
  'brand-1': '#a9c4d3',
  'brand-2': '#b1cbdf',
  'brand-3': '#c1d0e3',
  'brand-4': '#d4d4e4',
  'brand-5': '#ded8ec',
}

RGB Array

[169, 196, 211], [177, 203, 223], [193, 208, 227], [212, 212, 228], [222, 216, 236]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A9C4D3, #B1CBDF, #C1D0E3, #D4D4E4, #DED8EC 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: #a9c4d3; --color-2: #b1cbdf; --color-3: #c1d0e3; --color-4: #d4d4e4; --color-5: #ded8ec. 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