#AFDF1D + #A5AEB9 + #C4B6E7 + #C3C9CD + #94DDD1 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFDF1D

Grass Green · GreenYellow · Olive Green

HEX

#AFDF1D

RGB

rgb(175, 223, 29)

HSL

hsl(75, 77%, 49%)

HSB

hsb(75, 87%, 87%)

CMYK

cmyk(22%, 0%, 87%, 13%)

Oklch

oklch(84.0% 0.203 124.1)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#A5AEB9

Azure · DarkGray · Cobalt Blue

HEX

#A5AEB9

RGB

rgb(165, 174, 185)

HSL

hsl(213, 12%, 69%)

HSB

hsb(213, 11%, 73%)

CMYK

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

Oklch

oklch(74.7% 0.019 253.4)

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

#C4B6E7

Wisteria · LightSteelBlue · Sky Blue

HEX

#C4B6E7

RGB

rgb(196, 182, 231)

HSL

hsl(257, 51%, 81%)

HSB

hsb(257, 21%, 91%)

CMYK

cmyk(15%, 21%, 0%, 9%)

Oklch

oklch(80.4% 0.070 297.9)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#C3C9CD

Sky Blue · Silver · Pearl Gray

HEX

#C3C9CD

RGB

rgb(195, 201, 205)

HSL

hsl(204, 9%, 78%)

HSB

hsb(204, 5%, 80%)

CMYK

cmyk(5%, 2%, 0%, 20%)

Oklch

oklch(83.2% 0.009 236.6)

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

#94DDD1

Jade · SkyBlue · Lake Green

HEX

#94DDD1

RGB

rgb(148, 221, 209)

HSL

hsl(170, 52%, 72%)

HSB

hsb(170, 33%, 87%)

CMYK

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

Oklch

oklch(84.6% 0.075 183.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFDF1D

4D1DDD

Analogous

DDAD1D

AFDF1D

4DDD1D

Triadic

AFDF1D

1DADDD

DD1DAD

Split-Comp.

AFDF1D

1D4DDD

AD1DDD

Tetradic

AFDF1D

1DDDAD

4D1DDD

DD1D4D

Contrast Matrix WCAG 2.1 Contrast

AFDF1D	A5AEB9	C4B6E7	C3C9CD	94DDD1
—	1.4 Fail	1.2 Fail	1.1 Fail	1.0 Fail
1.4 Fail	—	1.2 Fail	1.3 Fail	1.4 Fail
1.2 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.1 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.0 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

1.6Fail

2.2Fail

1.9Fail

1.7Fail

1.6Fail

Black BG

13.4AAA

9.4AAA

11.2AAA

12.6AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C44C

A9A9B6

BEBEDB

C6C6CC

B4B4D4

Deuteranopia

C1BD57

A8A8B6

BFC0D8

C5C5CC

AFAAD5

Tritanopia

B17179

A5B4B4

C3D2D0

C3CBCB

98D6D7

Achromatopsia

BBBBBB

ADADAD

C0C0C0

C8C8C8

C6C6C6

Shades & Tints Shades & Tints

#AFDF1D

Dark

Light

#A5AEB9

Dark

Light

#C4B6E7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afdf1d;
  --color-2: #a5aeb9;
  --color-3: #c4b6e7;
  --color-4: #c3c9cd;
  --color-5: #94ddd1;
}

SCSS

$color-1: #afdf1d;
$color-2: #a5aeb9;
$color-3: #c4b6e7;
$color-4: #c3c9cd;
$color-5: #94ddd1;

TAILWIND

colors: {
  'brand-1': '#afdf1d',
  'brand-2': '#a5aeb9',
  'brand-3': '#c4b6e7',
  'brand-4': '#c3c9cd',
  'brand-5': '#94ddd1',
}

RGB Array

[175, 223, 29], [165, 174, 185], [196, 182, 231], [195, 201, 205], [148, 221, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #AFDF1D, #A5AEB9, #C4B6E7, #C3C9CD, #94DDD1 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: #afdf1d; --color-2: #a5aeb9; --color-3: #c4b6e7; --color-4: #c3c9cd; --color-5: #94ddd1. 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