← Back to Editor

#087AB6 · #1D9FC5 · #64BFA5 · #AADE82 · #E7F8AD

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#087AB6

Lake Blue · Teal · Prussian Blue

HEX
#087AB6
RGB
rgb(8, 122, 182)
HSL
hsl(201, 92%, 37%)
HSB
hsb(201, 96%, 71%)
CMYK
cmyk(96%, 33%, 0%, 29%)
Oklch
oklch(55.4% 0.128 241.3)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#1D9FC5

Lake Blue · LightSeaGreen · Mint Ice

HEX
#1D9FC5
RGB
rgb(29, 159, 197)
HSL
hsl(194, 74%, 44%)
HSB
hsb(194, 85%, 77%)
CMYK
cmyk(85%, 19%, 0%, 23%)
Oklch
oklch(65.4% 0.117 223.9)

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

#64BFA5

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#64BFA5
RGB
rgb(100, 191, 165)
HSL
hsl(163, 42%, 57%)
HSB
hsb(163, 48%, 75%)
CMYK
cmyk(48%, 0%, 14%, 25%)
Oklch
oklch(74.1% 0.096 172.8)

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

#AADE82

Emerald · LightGreen · Apple Green

HEX
#AADE82
RGB
rgb(170, 222, 130)
HSL
hsl(94, 58%, 69%)
HSB
hsb(94, 41%, 87%)
CMYK
cmyk(23%, 0%, 41%, 13%)
Oklch
oklch(84.3% 0.132 132.7)

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

#E7F8AD

Willow Green · Wheat · Mint Green

HEX
#E7F8AD
RGB
rgb(231, 248, 173)
HSL
hsl(74, 84%, 83%)
HSB
hsb(74, 30%, 97%)
CMYK
cmyk(7%, 0%, 30%, 3%)
Oklch
oklch(94.9% 0.098 118.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

087AB6
B54408

Analogous

08B59B
087AB6
0822B5

Triadic

087AB6
B50878
78B508

Split-Comp.

087AB6
B50822
B59B08

Tetradic

087AB6
9B08B5
B54408
22B508

Contrast Matrix WCAG 2.1 Contrast

087AB6
1D9FC5
64BFA5
AADE82
E7F8AD
—
1.5
Fail
2.1
Fail
3.0
AA Large
4.1
AA Large
1.5
Fail
—
1.4
Fail
2.0
Fail
2.7
Fail
2.1
Fail
1.4
Fail
—
1.4
Fail
1.9
Fail
3.0
AA Large
2.0
Fail
1.4
Fail
—
1.4
Fail
4.1
AA Large
2.7
Fail
1.9
Fail
1.4
Fail
—
White BG
4.7AA
3.1AA Large
2.2Fail
1.6Fail
1.1Fail
Black BG
4.5AA Large
6.8AA
9.5AAA
13.5AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

393AA7
5556BC
8B8CAB
C1C198
EEEFBF

Deuteranopia

332AA4
4E44BA
867FAD
BEBA9E
EDECC4

Tritanopia

0E9C9A
24B5B3
69B0B1
ADAAAE
E8CDD1

Achromatopsia

5F5F5F
7C7C7C
A1A1A1
C4C4C4
EAEAEA

Shades & Tints Shades & Tints

#087AB6

Dark
Light

#1D9FC5

Dark
Light

#64BFA5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #087ab6;
  --color-2: #1d9fc5;
  --color-3: #64bfa5;
  --color-4: #aade82;
  --color-5: #e7f8ad;
}

SCSS

$color-1: #087ab6;
$color-2: #1d9fc5;
$color-3: #64bfa5;
$color-4: #aade82;
$color-5: #e7f8ad;

TAILWIND

colors: {
  'brand-1': '#087ab6',
  'brand-2': '#1d9fc5',
  'brand-3': '#64bfa5',
  'brand-4': '#aade82',
  'brand-5': '#e7f8ad',
}

RGB Array

[8, 122, 182], [29, 159, 197], [100, 191, 165], [170, 222, 130], [231, 248, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #087AB6, #1D9FC5, #64BFA5, #AADE82, #E7F8AD is ideal for: social media posters, mobile apps, e-commerce promos, 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: #087ab6; --color-2: #1d9fc5; --color-3: #64bfa5; --color-4: #aade82; --color-5: #e7f8ad. 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 spring-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