← Back to Editor

#86B8D3 · #DF7D13 · #FDEBA2 · #CFEBA7 · #E6ECD8

pastel

A 5-color pastel palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#86B8D3

Sky Blue · SkyBlue · Cobalt Blue

HEX
#86B8D3
RGB
rgb(134, 184, 211)
HSL
hsl(201, 47%, 68%)
HSB
hsb(201, 36%, 83%)
CMYK
cmyk(36%, 13%, 0%, 17%)
Oklch
oklch(75.7% 0.065 232.3)

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

#DF7D13

Ochre · Chocolate · Amber Brown

HEX
#DF7D13
RGB
rgb(223, 125, 19)
HSL
hsl(31, 84%, 47%)
HSB
hsb(31, 91%, 87%)
CMYK
cmyk(0%, 44%, 91%, 13%)
Oklch
oklch(68.4% 0.158 58.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#FDEBA2

Goose Yellow · Wheat · Lemon Cream

HEX
#FDEBA2
RGB
rgb(253, 235, 162)
HSL
hsl(48, 96%, 81%)
HSB
hsb(48, 36%, 99%)
CMYK
cmyk(0%, 7%, 36%, 1%)
Oklch
oklch(93.8% 0.094 96.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#CFEBA7

Willow Green · Wheat · Apple Green

HEX
#CFEBA7
RGB
rgb(207, 235, 167)
HSL
hsl(85, 63%, 79%)
HSB
hsb(85, 29%, 92%)
CMYK
cmyk(12%, 0%, 29%, 8%)
Oklch
oklch(90.3% 0.094 126.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E6ECD8

Willow Green · Beige · Mint Green

HEX
#E6ECD8
RGB
rgb(230, 236, 216)
HSL
hsl(78, 34%, 89%)
HSB
hsb(78, 8%, 93%)
CMYK
cmyk(3%, 0%, 8%, 7%)
Oklch
oklch(93.3% 0.027 120.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86B8D3
D4A287

Analogous

87D4C8
86B8D3
8793D4

Triadic

86B8D3
D487B9
B9D487

Split-Comp.

86B8D3
D48793
D4C887

Tetradic

86B8D3
C887D4
D4A287
93D487

Contrast Matrix WCAG 2.1 Contrast

86B8D3
DF7D13
FDEBA2
CFEBA7
E6ECD8
—
1.4
Fail
1.8
Fail
1.6
Fail
1.8
Fail
1.4
Fail
—
2.5
Fail
2.3
Fail
2.5
Fail
1.8
Fail
2.5
Fail
—
1.1
Fail
1.0
Fail
1.6
Fail
2.3
Fail
1.1
Fail
—
1.1
Fail
1.8
Fail
2.5
Fail
1.0
Fail
1.1
Fail
—
White BG
2.1Fail
3.0Fail
1.2Fail
1.3Fail
1.2Fail
Black BG
9.8AAA
7.1AAA
17.6AAA
16.1AAA
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CCC
B5B42D
F5F5B4
DBDBB7
E9E9DD

Deuteranopia

9995CB
BAC233
F6F8B8
DAD7BB
E8E8DE

Tritanopia

89C7C6
DA4145
FCC2C5
D0C4C7
E6E1E2

Achromatopsia

ACACAC
8E8E8E
E8E8E8
DBDBDB
E8E8E8

Shades & Tints Shades & Tints

#86B8D3

Dark
Light

#DF7D13

Dark
Light

#FDEBA2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86b8d3;
  --color-2: #df7d13;
  --color-3: #fdeba2;
  --color-4: #cfeba7;
  --color-5: #e6ecd8;
}

SCSS

$color-1: #86b8d3;
$color-2: #df7d13;
$color-3: #fdeba2;
$color-4: #cfeba7;
$color-5: #e6ecd8;

TAILWIND

colors: {
  'brand-1': '#86b8d3',
  'brand-2': '#df7d13',
  'brand-3': '#fdeba2',
  'brand-4': '#cfeba7',
  'brand-5': '#e6ecd8',
}

RGB Array

[134, 184, 211], [223, 125, 19], [253, 235, 162], [207, 235, 167], [230, 236, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #86B8D3, #DF7D13, #FDEBA2, #CFEBA7, #E6ECD8 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #86b8d3; --color-2: #df7d13; --color-3: #fdeba2; --color-4: #cfeba7; --color-5: #e6ecd8. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 pastel-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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