#517D87 + #AD7FA2 + #F09EC8 + #FCD19F + #E2F2A4 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#517D87

Slate Blue · SlateGray · Mint Ice

HEX

#517D87

RGB

rgb(81, 125, 135)

HSL

hsl(191, 25%, 42%)

HSB

hsb(191, 40%, 53%)

CMYK

cmyk(40%, 7%, 0%, 47%)

Oklch

oklch(56.2% 0.051 213.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#AD7FA2

Rose Purple · DarkGray · Violet

HEX

#AD7FA2

RGB

rgb(173, 127, 162)

HSL

hsl(314, 22%, 59%)

HSB

hsb(314, 27%, 68%)

CMYK

cmyk(0%, 27%, 6%, 32%)

Oklch

oklch(65.3% 0.074 335.2)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#F09EC8

Mauve · LightPink · Cherry Blossom

HEX

#F09EC8

RGB

rgb(240, 158, 200)

HSL

hsl(329, 73%, 78%)

HSB

hsb(329, 34%, 94%)

CMYK

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

Oklch

oklch(79.3% 0.110 347.8)

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

#FCD19F

Goose Yellow · Wheat · Peach Orange

HEX

#FCD19F

RGB

rgb(252, 209, 159)

HSL

hsl(32, 94%, 81%)

HSB

hsb(32, 37%, 99%)

CMYK

cmyk(0%, 17%, 37%, 1%)

Oklch

oklch(88.6% 0.081 70.7)

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

#E2F2A4

Willow Green · Khaki · Apple Green

HEX

#E2F2A4

RGB

rgb(226, 242, 164)

HSL

hsl(72, 75%, 80%)

HSB

hsb(72, 32%, 95%)

CMYK

cmyk(7%, 0%, 32%, 5%)

Oklch

oklch(93.1% 0.101 117.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

517D87

865A50

Analogous

508675

517D87

506186

Triadic

517D87

86507C

7C8650

Split-Comp.

517D87

865061

867550

Tetradic

517D87

755086

865A50

618650

Contrast Matrix WCAG 2.1 Contrast

517D87	AD7FA2	F09EC8	FCD19F	E2F2A4
—	1.4 Fail	2.3 Fail	3.2 AA Large	3.8 AA Large
1.4 Fail	—	1.6 Fail	2.3 Fail	2.8 Fail
2.3 Fail	1.6 Fail	—	1.4 Fail	1.7 Fail
3.2 AA Large	2.3 Fail	1.4 Fail	—	1.2 Fail
3.8 AA Large	2.8 Fail	1.7 Fail	1.2 Fail	—

White BG

4.5AA

3.3AA Large

2.0Fail

1.4Fail

1.2Fail

Black BG

4.6AA

6.3AA

10.4AAA

14.8AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

646485

99999A

CCCCBE

E9E9AB

E9E9B7

Deuteranopia

625E84

9C9F98

D1D7BB

ECEFAE

E8E7BB

Tritanopia

538382

AB9391

ECB6B4

FAB5B7

E3C6C9

Achromatopsia

717171

919191

BBBBBB

D8D8D8

E4E4E4

Shades & Tints Shades & Tints

#517D87

Dark

Light

#AD7FA2

Dark

Light

#F09EC8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #517d87;
  --color-2: #ad7fa2;
  --color-3: #f09ec8;
  --color-4: #fcd19f;
  --color-5: #e2f2a4;
}

SCSS

$color-1: #517d87;
$color-2: #ad7fa2;
$color-3: #f09ec8;
$color-4: #fcd19f;
$color-5: #e2f2a4;

TAILWIND

colors: {
  'brand-1': '#517d87',
  'brand-2': '#ad7fa2',
  'brand-3': '#f09ec8',
  'brand-4': '#fcd19f',
  'brand-5': '#e2f2a4',
}

RGB Array

[81, 125, 135], [173, 127, 162], [240, 158, 200], [252, 209, 159], [226, 242, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #517D87, #AD7FA2, #F09EC8, #FCD19F, #E2F2A4 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: #517d87; --color-2: #ad7fa2; --color-3: #f09ec8; --color-4: #fcd19f; --color-5: #e2f2a4. 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 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