#A48EBC + #A3A8C5 + #A8C4D0 + #D0D2CD + #F7ECD8 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A48EBC

Wisteria · DarkGray · Lilac Purple

HEX

#A48EBC

RGB

rgb(164, 142, 188)

HSL

hsl(269, 26%, 65%)

HSB

hsb(269, 24%, 74%)

CMYK

cmyk(13%, 24%, 0%, 26%)

Oklch

oklch(68.2% 0.071 306.3)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#A3A8C5

Azure · DarkGray · Cobalt Blue

HEX

#A3A8C5

RGB

rgb(163, 168, 197)

HSL

hsl(231, 23%, 71%)

HSB

hsb(231, 17%, 77%)

CMYK

cmyk(17%, 15%, 0%, 23%)

Oklch

oklch(73.7% 0.042 277.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#A8C4D0

Sky Blue · LightSteelBlue · Lake Green

HEX

#A8C4D0

RGB

rgb(168, 196, 208)

HSL

hsl(198, 30%, 74%)

HSB

hsb(198, 19%, 82%)

CMYK

cmyk(19%, 6%, 0%, 18%)

Oklch

oklch(80.3% 0.035 225.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D0D2CD

Silver Gray · LightGray · Pearl Gray

HEX

#D0D2CD

RGB

rgb(208, 210, 205)

HSL

hsl(84, 5%, 81%)

HSB

hsb(84, 2%, 82%)

CMYK

cmyk(1%, 0%, 2%, 18%)

Oklch

oklch(86.1% 0.007 124.5)

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

#F7ECD8

Goose Yellow · Beige · Peach Orange

HEX

#F7ECD8

RGB

rgb(247, 236, 216)

HSL

hsl(39, 66%, 91%)

HSB

hsb(39, 13%, 97%)

CMYK

cmyk(0%, 4%, 13%, 3%)

Oklch

oklch(94.6% 0.029 82.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A48EBC

A7BD8F

Analogous

8F8FBD

A48EBC

BC8FBD

Triadic

A48EBC

BDA58F

8FBDA5

Split-Comp.

A48EBC

BDBC8F

8FBD8F

Tetradic

A48EBC

BD8F8F

A7BD8F

8FBDBC

Contrast Matrix WCAG 2.1 Contrast

A48EBC	A3A8C5	A8C4D0	D0D2CD	F7ECD8
—	1.2 Fail	1.6 Fail	1.9 Fail	2.5 Fail
1.2 Fail	—	1.3 Fail	1.5 Fail	2.0 Fail
1.6 Fail	1.3 Fail	—	1.2 Fail	1.6 Fail
1.9 Fail	1.5 Fail	1.2 Fail	—	1.3 Fail
2.5 Fail	2.0 Fail	1.6 Fail	1.3 Fail	—

White BG

2.9Fail

2.3Fail

1.8Fail

1.5Fail

1.2Fail

Black BG

7.2AAA

9.0AAA

11.5AAA

13.8AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9AB1

A5A5BE

B4B4CD

D1D1CE

F2F2DD

Deuteranopia

9C9DAE

A5A5BC

B3B0CC

D1D1CF

F3F4DE

Tritanopia

A3A8A6

A3B8B7

A9CBCA

D0CFCF

F6E1E2

Achromatopsia

9A9A9A

AAAAAA

BDBDBD

D1D1D1

EDEDED

Shades & Tints Shades & Tints

#A48EBC

Dark

Light

#A3A8C5

Dark

Light

#A8C4D0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a48ebc;
  --color-2: #a3a8c5;
  --color-3: #a8c4d0;
  --color-4: #d0d2cd;
  --color-5: #f7ecd8;
}

SCSS

$color-1: #a48ebc;
$color-2: #a3a8c5;
$color-3: #a8c4d0;
$color-4: #d0d2cd;
$color-5: #f7ecd8;

TAILWIND

colors: {
  'brand-1': '#a48ebc',
  'brand-2': '#a3a8c5',
  'brand-3': '#a8c4d0',
  'brand-4': '#d0d2cd',
  'brand-5': '#f7ecd8',
}

RGB Array

[164, 142, 188], [163, 168, 197], [168, 196, 208], [208, 210, 205], [247, 236, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #A48EBC, #A3A8C5, #A8C4D0, #D0D2CD, #F7ECD8 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: #a48ebc; --color-2: #a3a8c5; --color-3: #a8c4d0; --color-4: #d0d2cd; --color-5: #f7ecd8. 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