← Back to Editor

#A8C7CC · #A7BEC6 · #D5C2DE · #E5D1D2 · #F0DCDE

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A8C7CC

Sky Blue · LightSteelBlue · Lake Green

HEX
#A8C7CC
RGB
rgb(168, 199, 204)
HSL
hsl(188, 26%, 73%)
HSB
hsb(188, 18%, 80%)
CMYK
cmyk(18%, 2%, 0%, 20%)
Oklch
oklch(80.8% 0.034 208.4)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#A7BEC6

Sky Blue · Silver · Lake Green

HEX
#A7BEC6
RGB
rgb(167, 190, 198)
HSL
hsl(195, 21%, 72%)
HSB
hsb(195, 16%, 78%)
CMYK
cmyk(16%, 4%, 0%, 22%)
Oklch
oklch(78.7% 0.028 220.7)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#D5C2DE

Lilac · LightGray · Lavender

HEX
#D5C2DE
RGB
rgb(213, 194, 222)
HSL
hsl(281, 30%, 82%)
HSB
hsb(281, 13%, 87%)
CMYK
cmyk(4%, 13%, 0%, 13%)
Oklch
oklch(83.8% 0.044 315.0)

TraditionalLilac」· PaintLavender」· Creative Lavender Dream

#E5D1D2

Peach Pink · LightGray · Cherry Blossom

HEX
#E5D1D2
RGB
rgb(229, 209, 210)
HSL
hsl(357, 28%, 86%)
HSB
hsb(357, 9%, 90%)
CMYK
cmyk(0%, 9%, 8%, 10%)
Oklch
oklch(87.7% 0.022 14.1)

TraditionalPeach Pink」· PaintCherry Blossom」· Creative Rose Petal

#F0DCDE

Peach Pink · Linen · Cherry Blossom

HEX
#F0DCDE
RGB
rgb(240, 220, 222)
HSL
hsl(354, 40%, 90%)
HSB
hsb(354, 8%, 94%)
CMYK
cmyk(0%, 8%, 7%, 6%)
Oklch
oklch(91.1% 0.022 10.6)

TraditionalPeach Pink」· PaintCherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8C7CC
CCADA8

Analogous

A8CCBF
A8C7CC
A8B5CC

Triadic

A8C7CC
CCA8C7
C7CCA8

Split-Comp.

A8C7CC
CCA8B5
CCBFA8

Tetradic

A8C7CC
BFA8CC
CCADA8
B5CCA8

Contrast Matrix WCAG 2.1 Contrast

A8C7CC
A7BEC6
D5C2DE
E5D1D2
F0DCDE
1.1
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.5
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.3
Fail
1.2
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.4
Fail
1.5
Fail
1.3
Fail
1.1
Fail
White BG
1.8Fail
1.9Fail
1.7Fail
1.5Fail
1.3Fail
Black BG
11.7AAA
10.8AAA
12.6AAA
14.4AAA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B6CB
B1B1C4
CDCDD7
DCDCD2
E7E7DE

Deuteranopia

B4B1CA
B0AEC4
CECFD6
DEDFD2
E9EADD

Tritanopia

AACACA
A8C3C2
D4D2D1
E4D2D2
EFDDDD

Achromatopsia

BEBEBE
B8B8B8
CBCBCB
D7D7D7
E2E2E2

Shades & Tints Shades & Tints

#A8C7CC

Dark
Light

#A7BEC6

Dark
Light

#D5C2DE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8c7cc;
  --color-2: #a7bec6;
  --color-3: #d5c2de;
  --color-4: #e5d1d2;
  --color-5: #f0dcde;
}

SCSS

$color-1: #a8c7cc;
$color-2: #a7bec6;
$color-3: #d5c2de;
$color-4: #e5d1d2;
$color-5: #f0dcde;

TAILWIND

colors: {
  'brand-1': '#a8c7cc',
  'brand-2': '#a7bec6',
  'brand-3': '#d5c2de',
  'brand-4': '#e5d1d2',
  'brand-5': '#f0dcde',
}

RGB Array

[168, 199, 204], [167, 190, 198], [213, 194, 222], [229, 209, 210], [240, 220, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #A8C7CC, #A7BEC6, #D5C2DE, #E5D1D2, #F0DCDE is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a8c7cc; --color-2: #a7bec6; --color-3: #d5c2de; --color-4: #e5d1d2; --color-5: #f0dcde. 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 spring-style 5-color scheme is especially suited for beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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