← Back to Editor

#86A7A2 · #EDC5A9 · #F1A18B · #E03F58 · #803856

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#86A7A2

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#86A7A2
RGB
rgb(134, 167, 162)
HSL
hsl(171, 16%, 59%)
HSB
hsb(171, 20%, 65%)
CMYK
cmyk(20%, 0%, 3%, 35%)
Oklch
oklch(70.2% 0.037 185.1)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#EDC5A9

Apricot · Wheat · Peach Orange

HEX
#EDC5A9
RGB
rgb(237, 197, 169)
HSL
hsl(25, 65%, 80%)
HSB
hsb(25, 29%, 93%)
CMYK
cmyk(0%, 17%, 29%, 7%)
Oklch
oklch(85.1% 0.059 56.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F1A18B

Peach Pink · DarkSalmon · Coral Red

HEX
#F1A18B
RGB
rgb(241, 161, 139)
HSL
hsl(13, 78%, 75%)
HSB
hsb(13, 42%, 95%)
CMYK
cmyk(0%, 33%, 42%, 5%)
Oklch
oklch(78.3% 0.101 36.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E03F58

Vermilion · Tomato · Passion Red

HEX
#E03F58
RGB
rgb(224, 63, 88)
HSL
hsl(351, 72%, 56%)
HSB
hsb(351, 72%, 88%)
CMYK
cmyk(0%, 72%, 61%, 12%)
Oklch
oklch(61.0% 0.196 16.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#803856

Dark Violet · DimGray · Camellia

HEX
#803856
RGB
rgb(128, 56, 86)
HSL
hsl(335, 39%, 36%)
HSB
hsb(335, 56%, 50%)
CMYK
cmyk(0%, 56%, 33%, 50%)
Oklch
oklch(44.6% 0.105 356.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86A7A2
A7868B

Analogous

86A791
86A7A2
869BA7

Triadic

86A7A2
A286A7
A7A286

Split-Comp.

86A7A2
A7869B
A79186

Tetradic

86A7A2
9186A7
A7868B
9BA786

Contrast Matrix WCAG 2.1 Contrast

86A7A2
EDC5A9
F1A18B
E03F58
803856
—
1.6
Fail
1.3
Fail
1.6
Fail
3.1
AA Large
1.6
Fail
—
1.3
Fail
2.6
Fail
5.0
AA
1.3
Fail
1.3
Fail
—
2.0
Fail
3.9
AA Large
1.6
Fail
2.6
Fail
2.0
Fail
—
1.9
Fail
3.1
AA Large
5.0
AA
3.9
AA Large
1.9
Fail
—
White BG
2.6Fail
1.6Fail
2.1Fail
4.2AA Large
8.0AAA
Black BG
8.1AAA
13.2AAA
10.2AAA
5.0AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9495A3
DCDBB0
CECE90
9A9952
61604F

Deuteranopia

9290A4
DEE1B1
D3D992
A4B051
656A4D

Tritanopia

88A4A4
EBB5B6
ED9595
D84D4C
7C4948

Achromatopsia

9D9D9D
CECECE
B6B6B6
727272
515151

Shades & Tints Shades & Tints

#86A7A2

Dark
Light

#EDC5A9

Dark
Light

#F1A18B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86a7a2;
  --color-2: #edc5a9;
  --color-3: #f1a18b;
  --color-4: #e03f58;
  --color-5: #803856;
}

SCSS

$color-1: #86a7a2;
$color-2: #edc5a9;
$color-3: #f1a18b;
$color-4: #e03f58;
$color-5: #803856;

TAILWIND

colors: {
  'brand-1': '#86a7a2',
  'brand-2': '#edc5a9',
  'brand-3': '#f1a18b',
  'brand-4': '#e03f58',
  'brand-5': '#803856',
}

RGB Array

[134, 167, 162], [237, 197, 169], [241, 161, 139], [224, 63, 88], [128, 56, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #86A7A2, #EDC5A9, #F1A18B, #E03F58, #803856 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #86a7a2; --color-2: #edc5a9; --color-3: #f1a18b; --color-4: #e03f58; --color-5: #803856. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 summer-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