#BBDFD5 + #C9D4AA + #D8BF62 + #DA9791 + #C67BA6 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBDFD5

Jade · LightBlue · Glacier Blue

HEX

#BBDFD5

RGB

rgb(187, 223, 213)

HSL

hsl(163, 36%, 80%)

HSB

hsb(163, 16%, 87%)

CMYK

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

Oklch

oklch(87.5% 0.040 176.7)

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

#C9D4AA

Willow Green · Silver · Apple Green

HEX

#C9D4AA

RGB

rgb(201, 212, 170)

HSL

hsl(76, 33%, 75%)

HSB

hsb(76, 20%, 83%)

CMYK

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

Oklch

oklch(85.1% 0.058 119.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D8BF62

Ginger · BurlyWood · Sunflower

HEX

#D8BF62

RGB

rgb(216, 191, 98)

HSL

hsl(47, 60%, 62%)

HSB

hsb(47, 55%, 85%)

CMYK

cmyk(0%, 12%, 55%, 15%)

Oklch

oklch(80.7% 0.117 94.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DA9791

Peach Pink · DarkSalmon · Coral Red

HEX

#DA9791

RGB

rgb(218, 151, 145)

HSL

hsl(5, 50%, 71%)

HSB

hsb(5, 33%, 85%)

CMYK

cmyk(0%, 31%, 33%, 15%)

Oklch

oklch(74.0% 0.082 24.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C67BA6

Mauve · Orchid · Rose Pink

HEX

#C67BA6

RGB

rgb(198, 123, 166)

HSL

hsl(326, 40%, 63%)

HSB

hsb(326, 38%, 78%)

CMYK

cmyk(0%, 38%, 16%, 22%)

Oklch

oklch(67.5% 0.108 345.0)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBDFD5

DEBAC4

Analogous

BADEC2

BBDFD5

BAD6DE

Triadic

BBDFD5

D4BADE

DED4BA

Split-Comp.

BBDFD5

DEBAD6

DEC2BA

Tetradic

BBDFD5

C2BADE

DEBAC4

D6DEBA

Contrast Matrix WCAG 2.1 Contrast

BBDFD5	C9D4AA	D8BF62	DA9791	C67BA6
—	1.1 Fail	1.3 Fail	1.7 Fail	2.2 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	2.0 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	1.7 Fail
1.7 Fail	1.5 Fail	1.3 Fail	—	1.3 Fail
2.2 Fail	2.0 Fail	1.7 Fail	1.3 Fail	—

White BG

1.4Fail

1.6Fail

1.8Fail

2.4Fail

3.1AA Large

Black BG

14.6AAA

13.5AAA

11.5AAA

8.8AAA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBD7

CECEB4

CDCD79

BDBC92

A6A59C

Deuteranopia

C9C6D8

CDCCB7

CFD17E

C1C693

AAB099

Tritanopia

BDD9DA

CABCBE

D78A8E

D79494

C29392

Achromatopsia

D3D3D3

CCCCCC

BCBCBC

AAAAAA

969696

Shades & Tints Shades & Tints

#BBDFD5

Dark

Light

#C9D4AA

Dark

Light

#D8BF62

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbdfd5;
  --color-2: #c9d4aa;
  --color-3: #d8bf62;
  --color-4: #da9791;
  --color-5: #c67ba6;
}

SCSS

$color-1: #bbdfd5;
$color-2: #c9d4aa;
$color-3: #d8bf62;
$color-4: #da9791;
$color-5: #c67ba6;

TAILWIND

colors: {
  'brand-1': '#bbdfd5',
  'brand-2': '#c9d4aa',
  'brand-3': '#d8bf62',
  'brand-4': '#da9791',
  'brand-5': '#c67ba6',
}

RGB Array

[187, 223, 213], [201, 212, 170], [216, 191, 98], [218, 151, 145], [198, 123, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #BBDFD5, #C9D4AA, #D8BF62, #DA9791, #C67BA6 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: #bbdfd5; --color-2: #c9d4aa; --color-3: #d8bf62; --color-4: #da9791; --color-5: #c67ba6. 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