#86AED1 + #ACC0D8 + #CEBB93 + #EED8C1 + #FFE9D1 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#86AED1

Sky Blue · SkyBlue · Cobalt Blue

HEX

#86AED1

RGB

rgb(134, 174, 209)

HSL

hsl(208, 45%, 67%)

HSB

hsb(208, 36%, 82%)

CMYK

cmyk(36%, 17%, 0%, 18%)

Oklch

oklch(73.4% 0.067 245.3)

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

#ACC0D8

Azure · LightSteelBlue · Cobalt Blue

HEX

#ACC0D8

RGB

rgb(172, 192, 216)

HSL

hsl(213, 36%, 76%)

HSB

hsb(213, 20%, 85%)

CMYK

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

Oklch

oklch(80.0% 0.041 253.1)

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

#CEBB93

Ginger · Tan · Sunflower

HEX

#CEBB93

RGB

rgb(206, 187, 147)

HSL

hsl(41, 38%, 69%)

HSB

hsb(41, 29%, 81%)

CMYK

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

Oklch

oklch(79.8% 0.058 85.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#EED8C1

Goose Yellow · Wheat · Peach Orange

HEX

#EED8C1

RGB

rgb(238, 216, 193)

HSL

hsl(31, 57%, 85%)

HSB

hsb(31, 19%, 93%)

CMYK

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

Oklch

oklch(89.4% 0.039 68.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFE9D1

Goose Yellow · Bisque · Peach Orange

HEX

#FFE9D1

RGB

rgb(255, 233, 209)

HSL

hsl(31, 100%, 91%)

HSB

hsb(31, 18%, 100%)

CMYK

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

Oklch

oklch(94.6% 0.040 69.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86AED1

D1A885

Analogous

85D1CE

86AED1

8588D1

Triadic

86AED1

D185AD

ADD185

Split-Comp.

86AED1

D18588

D1CE85

Tetradic

86AED1

CE85D1

D1A885

88D185

Contrast Matrix WCAG 2.1 Contrast

86AED1	ACC0D8	CEBB93	EED8C1	FFE9D1
—	1.3 Fail	1.2 Fail	1.7 Fail	2.0 Fail
1.3 Fail	—	1.0 Fail	1.3 Fail	1.6 Fail
1.2 Fail	1.0 Fail	—	1.4 Fail	1.6 Fail
1.7 Fail	1.3 Fail	1.4 Fail	—	1.2 Fail
2.0 Fail	1.6 Fail	1.6 Fail	1.2 Fail	—

White BG

2.3Fail

1.9Fail

1.4Fail

1.2Fail

Black BG

9.0AAA

11.3AAA

11.2AAA

15.2AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9798C9

B5B5D2

C6C69D

E4E4C7

F5F5D7

Deuteranopia

9592C6

B4B2D1

C7C89F

E6E7C8

F7F8D8

Tritanopia

88C2C0

ADCECD

CDA4A6

EDCBCC

FEDBDC

Achromatopsia

A6A6A6

BDBDBD

BCBCBC

DCDCDC

EDEDED

Shades & Tints Shades & Tints

#86AED1

Dark

Light

#ACC0D8

Dark

Light

#CEBB93

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86aed1;
  --color-2: #acc0d8;
  --color-3: #cebb93;
  --color-4: #eed8c1;
  --color-5: #ffe9d1;
}

SCSS

$color-1: #86aed1;
$color-2: #acc0d8;
$color-3: #cebb93;
$color-4: #eed8c1;
$color-5: #ffe9d1;

TAILWIND

colors: {
  'brand-1': '#86aed1',
  'brand-2': '#acc0d8',
  'brand-3': '#cebb93',
  'brand-4': '#eed8c1',
  'brand-5': '#ffe9d1',
}

RGB Array

[134, 174, 209], [172, 192, 216], [206, 187, 147], [238, 216, 193], [255, 233, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #86AED1, #ACC0D8, #CEBB93, #EED8C1, #FFE9D1 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: #86aed1; --color-2: #acc0d8; --color-3: #cebb93; --color-4: #eed8c1; --color-5: #ffe9d1. 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