#CEEAB7 + #B4D5BC + #B1B0D4 + #9C97DC + #8177DD · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CEEAB7

Emerald · LightGray · Mint Green

HEX

#CEEAB7

RGB

rgb(206, 234, 183)

HSL

hsl(93, 55%, 82%)

HSB

hsb(93, 22%, 92%)

CMYK

cmyk(12%, 0%, 22%, 8%)

Oklch

oklch(90.4% 0.074 131.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#B4D5BC

Celadon · Silver · Apple Green

HEX

#B4D5BC

RGB

rgb(180, 213, 188)

HSL

hsl(135, 28%, 77%)

HSB

hsb(135, 15%, 84%)

CMYK

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

Oklch

oklch(84.2% 0.049 152.6)

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

#B1B0D4

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B1B0D4

RGB

rgb(177, 176, 212)

HSL

hsl(242, 30%, 76%)

HSB

hsb(242, 17%, 83%)

CMYK

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

Oklch

oklch(77.0% 0.051 286.4)

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

#9C97DC

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#9C97DC

RGB

rgb(156, 151, 220)

HSL

hsl(244, 50%, 73%)

HSB

hsb(244, 31%, 86%)

CMYK

cmyk(29%, 31%, 0%, 14%)

Oklch

oklch(70.7% 0.100 286.9)

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

#8177DD

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#8177DD

RGB

rgb(129, 119, 221)

HSL

hsl(246, 60%, 67%)

HSB

hsb(246, 46%, 87%)

CMYK

cmyk(42%, 46%, 0%, 13%)

Oklch

oklch(62.5% 0.150 285.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CEEAB7

D4B8EA

Analogous

E8EAB8

CEEAB7

B8EABA

Triadic

CEEAB7

B8CFEA

EAB8CF

Split-Comp.

CEEAB7

BAB8EA

EAB8E8

Tetradic

CEEAB7

B8E8EA

D4B8EA

EABAB8

Contrast Matrix WCAG 2.1 Contrast

CEEAB7	B4D5BC	B1B0D4	9C97DC	8177DD
—	1.2 Fail	1.6 Fail	2.0 Fail	2.9 Fail
1.2 Fail	—	1.3 Fail	1.7 Fail	2.3 Fail
1.6 Fail	1.3 Fail	—	1.3 Fail	1.8 Fail
2.0 Fail	1.7 Fail	1.3 Fail	—	1.4 Fail
2.9 Fail	2.3 Fail	1.8 Fail	1.4 Fail	—

White BG

1.3Fail

1.6Fail

2.1Fail

2.7Fail

3.7AA Large

Black BG

16.1AAA

13.2AAA

10.0AAA

7.9AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADAC3

C2C3C2

B1B1CB

9A9ACB

7D7DC4

Deuteranopia

D9D6C6

C0BEC4

B1B1C9

9A9BC7

7D7EBE

Tritanopia

CFCDCF

B6C7C8

B1C4C3

9CBEBB

81B1AD

Achromatopsia

DCDCDC

C8C8C8

B4B4B4

A0A0A0

868686

Shades & Tints Shades & Tints

#CEEAB7

Dark

Light

#B4D5BC

Dark

Light

#B1B0D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ceeab7;
  --color-2: #b4d5bc;
  --color-3: #b1b0d4;
  --color-4: #9c97dc;
  --color-5: #8177dd;
}

SCSS

$color-1: #ceeab7;
$color-2: #b4d5bc;
$color-3: #b1b0d4;
$color-4: #9c97dc;
$color-5: #8177dd;

TAILWIND

colors: {
  'brand-1': '#ceeab7',
  'brand-2': '#b4d5bc',
  'brand-3': '#b1b0d4',
  'brand-4': '#9c97dc',
  'brand-5': '#8177dd',
}

RGB Array

[206, 234, 183], [180, 213, 188], [177, 176, 212], [156, 151, 220], [129, 119, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #CEEAB7, #B4D5BC, #B1B0D4, #9C97DC, #8177DD 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: #ceeab7; --color-2: #b4d5bc; --color-3: #b1b0d4; --color-4: #9c97dc; --color-5: #8177dd. 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