#ABA6A2 + #80FFD4 + #BCDCEB + #D9D9D9 + #FFD1DE · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABA6A2

Ash · DarkGray · Silver Sand

HEX

#ABA6A2

RGB

rgb(171, 166, 162)

HSL

hsl(27, 5%, 65%)

HSB

hsb(27, 5%, 67%)

CMYK

cmyk(0%, 3%, 5%, 33%)

Oklch

oklch(72.8% 0.008 61.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#80FFD4

Jade · SkyBlue · Lake Green

HEX

#80FFD4

RGB

rgb(128, 255, 212)

HSL

hsl(160, 100%, 75%)

HSB

hsb(160, 50%, 100%)

CMYK

cmyk(50%, 0%, 17%, 0%)

Oklch

oklch(91.5% 0.130 168.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#BCDCEB

Sky Blue · LightBlue · Glacier Blue

HEX

#BCDCEB

RGB

rgb(188, 220, 235)

HSL

hsl(199, 54%, 83%)

HSB

hsb(199, 20%, 92%)

CMYK

cmyk(20%, 6%, 0%, 8%)

Oklch

oklch(87.6% 0.040 227.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#D9D9D9

Silver Gray · LightGray · Pearl Gray

HEX

#D9D9D9

RGB

rgb(217, 217, 217)

HSL

hsl(0, 0%, 85%)

HSB

hsb(0, 0%, 85%)

CMYK

cmyk(0%, 0%, 0%, 15%)

Oklch

oklch(88.5% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#FFD1DE

Rouge · Pink · Cherry Blossom

HEX

#FFD1DE

RGB

rgb(255, 209, 222)

HSL

hsl(343, 100%, 91%)

HSB

hsb(343, 18%, 100%)

CMYK

cmyk(0%, 18%, 13%, 0%)

Oklch

oklch(90.4% 0.054 359.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABA6A2

A1A6AA

Analogous

AAA1A2

ABA6A2

AAAAA1

Triadic

ABA6A2

A1AAA5

A5A1AA

Split-Comp.

ABA6A2

A1AAAA

A1A2AA

Tetradic

ABA6A2

A2AAA1

A1A6AA

AAA1AA

Contrast Matrix WCAG 2.1 Contrast

ABA6A2	80FFD4	BCDCEB	D9D9D9	FFD1DE
—	2.0 Fail	1.7 Fail	1.7 Fail	1.8 Fail
2.0 Fail	—	1.2 Fail	1.2 Fail	1.1 Fail
1.7 Fail	1.2 Fail	—	1.0 Fail	1.1 Fail
1.7 Fail	1.2 Fail	1.0 Fail	—	1.0 Fail
1.8 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

2.4Fail

1.2Fail

1.4Fail

Black BG

8.7AAA

17.2AAA

14.6AAA

14.9AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A9A3

B7B8DE

CACAE7

D9D9D9

EBEBDB

Deuteranopia

A9AAA3

B0A6E1

C8C6E7

D9D9D9

EEF1DA

Tritanopia

ABA4A4

86E7E8

BEE5E4

D9D9D9

FDD8D8

Achromatopsia

A7A7A7

D4D4D4

D9D9D9

E0E0E0

Shades & Tints Shades & Tints

#ABA6A2

Dark

Light

#80FFD4

Dark

Light

#BCDCEB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aba6a2;
  --color-2: #80ffd4;
  --color-3: #bcdceb;
  --color-4: #d9d9d9;
  --color-5: #ffd1de;
}

SCSS

$color-1: #aba6a2;
$color-2: #80ffd4;
$color-3: #bcdceb;
$color-4: #d9d9d9;
$color-5: #ffd1de;

TAILWIND

colors: {
  'brand-1': '#aba6a2',
  'brand-2': '#80ffd4',
  'brand-3': '#bcdceb',
  'brand-4': '#d9d9d9',
  'brand-5': '#ffd1de',
}

RGB Array

[171, 166, 162], [128, 255, 212], [188, 220, 235], [217, 217, 217], [255, 209, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #ABA6A2, #80FFD4, #BCDCEB, #D9D9D9, #FFD1DE 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: #aba6a2; --color-2: #80ffd4; --color-3: #bcdceb; --color-4: #d9d9d9; --color-5: #ffd1de. 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 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