#DECF8C + #CBBD9D + #AFB3B0 + #A09DC1 + #9086D1 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DECF8C

Goose Yellow · BurlyWood · Sunflower

HEX

#DECF8C

RGB

rgb(222, 207, 140)

HSL

hsl(49, 55%, 71%)

HSB

hsb(49, 37%, 87%)

CMYK

cmyk(0%, 7%, 37%, 13%)

Oklch

oklch(85.1% 0.088 97.1)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#CBBD9D

Goose Yellow · Tan · Sunflower

HEX

#CBBD9D

RGB

rgb(203, 189, 157)

HSL

hsl(42, 31%, 71%)

HSB

hsb(42, 23%, 80%)

CMYK

cmyk(0%, 7%, 23%, 20%)

Oklch

oklch(80.2% 0.046 87.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#AFB3B0

Ash · DarkGray · Silver Sand

HEX

#AFB3B0

RGB

rgb(175, 179, 176)

HSL

hsl(135, 3%, 69%)

HSB

hsb(135, 2%, 70%)

CMYK

cmyk(2%, 0%, 2%, 30%)

Oklch

oklch(76.3% 0.006 153.7)

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

#A09DC1

Wisteria · DarkGray · Cobalt Blue

HEX

#A09DC1

RGB

rgb(160, 157, 193)

HSL

hsl(245, 22%, 69%)

HSB

hsb(245, 19%, 76%)

CMYK

cmyk(17%, 19%, 0%, 24%)

Oklch

oklch(71.1% 0.052 288.8)

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

#9086D1

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#9086D1

RGB

rgb(144, 134, 209)

HSL

hsl(248, 45%, 67%)

HSB

hsb(248, 36%, 82%)

CMYK

cmyk(31%, 36%, 0%, 18%)

Oklch

oklch(65.9% 0.110 289.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DECF8C

8C9BDE

Analogous

DEA68C

DECF8C

C4DE8C

Triadic

DECF8C

8CDECF

CF8CDE

Split-Comp.

DECF8C

8CC4DE

A68CDE

Tetradic

DECF8C

8CDEA6

8C9BDE

DE8CC4

Contrast Matrix WCAG 2.1 Contrast

DECF8C	CBBD9D	AFB3B0	A09DC1	9086D1
—	1.2 Fail	1.4 Fail	1.7 Fail	2.1 Fail
1.2 Fail	—	1.1 Fail	1.4 Fail	1.7 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
2.1 Fail	1.7 Fail	1.5 Fail	1.2 Fail	—

White BG

1.6Fail

1.9Fail

2.1Fail

2.6Fail

3.2AA Large

Black BG

13.4AAA

11.3AAA

9.9AAA

8.1AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D79C

C5C5A5

B1B1B1

9F9FB8

8C8CBF

Deuteranopia

D8D9A0

C6C7A7

B1B0B1

9F9FB6

8C8DBA

Tritanopia

DDA9AC

CAABAC

AFB1B1

A0B1B0

8FB1AD

Achromatopsia

CCCCCC

BEBEBE

B1B1B1

A2A2A2

929292

Shades & Tints Shades & Tints

#DECF8C

Dark

Light

#CBBD9D

Dark

Light

#AFB3B0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #decf8c;
  --color-2: #cbbd9d;
  --color-3: #afb3b0;
  --color-4: #a09dc1;
  --color-5: #9086d1;
}

SCSS

$color-1: #decf8c;
$color-2: #cbbd9d;
$color-3: #afb3b0;
$color-4: #a09dc1;
$color-5: #9086d1;

TAILWIND

colors: {
  'brand-1': '#decf8c',
  'brand-2': '#cbbd9d',
  'brand-3': '#afb3b0',
  'brand-4': '#a09dc1',
  'brand-5': '#9086d1',
}

RGB Array

[222, 207, 140], [203, 189, 157], [175, 179, 176], [160, 157, 193], [144, 134, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #DECF8C, #CBBD9D, #AFB3B0, #A09DC1, #9086D1 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: #decf8c; --color-2: #cbbd9d; --color-3: #afb3b0; --color-4: #a09dc1; --color-5: #9086d1. 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