#B4C47F + #C0C47F + #DEEABB + #ECFCC9 + #F2F7C3 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B4C47F

Willow Green · Tan · Apple Green

HEX

#B4C47F

RGB

rgb(180, 196, 127)

HSL

hsl(74, 37%, 63%)

HSB

hsb(74, 35%, 77%)

CMYK

cmyk(8%, 0%, 35%, 23%)

Oklch

oklch(79.2% 0.093 119.2)

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

#C0C47F

Fresh Green · Tan · Sunflower

HEX

#C0C47F

RGB

rgb(192, 196, 127)

HSL

hsl(63, 37%, 63%)

HSB

hsb(63, 35%, 77%)

CMYK

cmyk(2%, 0%, 35%, 23%)

Oklch

oklch(80.1% 0.090 111.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DEEABB

Willow Green · Wheat · Mint Green

HEX

#DEEABB

RGB

rgb(222, 234, 187)

HSL

hsl(75, 53%, 83%)

HSB

hsb(75, 20%, 92%)

CMYK

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

Oklch

oklch(91.6% 0.063 119.3)

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

#ECFCC9

Willow Green · Beige · Mint Green

HEX

#ECFCC9

RGB

rgb(236, 252, 201)

HSL

hsl(79, 89%, 89%)

HSB

hsb(79, 20%, 99%)

CMYK

cmyk(6%, 0%, 20%, 1%)

Oklch

oklch(96.6% 0.068 121.8)

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

#F2F7C3

Fresh Green · Bisque · Lemon Cream

HEX

#F2F7C3

RGB

rgb(242, 247, 195)

HSL

hsl(66, 76%, 87%)

HSB

hsb(66, 21%, 97%)

CMYK

cmyk(2%, 0%, 21%, 3%)

Oklch

oklch(96.0% 0.067 112.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4C47F

8E7EC4

Analogous

C4B17E

B4C47F

90C47E

Triadic

B4C47F

7EB3C4

C47EB3

Split-Comp.

B4C47F

7E90C4

B17EC4

Tetradic

B4C47F

7EC4B1

8E7EC4

C47E90

Contrast Matrix WCAG 2.1 Contrast

B4C47F	C0C47F	DEEABB	ECFCC9	F2F7C3
—	1.0 Fail	1.5 Fail	1.7 Fail	1.7 Fail
1.0 Fail	—	1.4 Fail	1.7 Fail	1.6 Fail
1.5 Fail	1.4 Fail	—	1.2 Fail	1.1 Fail
1.7 Fail	1.7 Fail	1.2 Fail	—	1.0 Fail
1.7 Fail	1.6 Fail	1.1 Fail	1.0 Fail	—

White BG

1.9Fail

1.8Fail

1.3Fail

1.1Fail

Black BG

11.1AAA

11.4AAA

16.6AAA

19.3AAA

18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBB90

C2C290

E3E3C6

F3F3D5

F4F4D0

Deuteranopia

BAB994

C2C194

E3E2C9

F2F1D8

F4F3D3

Tritanopia

B59DA0

C09DA0

DFCFD1

EDDFE1

F2DADC

Achromatopsia

B7B7B7

BBBBBB

E1E1E1

F1F1F1

F0F0F0

Shades & Tints Shades & Tints

#B4C47F

Dark

Light

#C0C47F

Dark

Light

#DEEABB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4c47f;
  --color-2: #c0c47f;
  --color-3: #deeabb;
  --color-4: #ecfcc9;
  --color-5: #f2f7c3;
}

SCSS

$color-1: #b4c47f;
$color-2: #c0c47f;
$color-3: #deeabb;
$color-4: #ecfcc9;
$color-5: #f2f7c3;

TAILWIND

colors: {
  'brand-1': '#b4c47f',
  'brand-2': '#c0c47f',
  'brand-3': '#deeabb',
  'brand-4': '#ecfcc9',
  'brand-5': '#f2f7c3',
}

RGB Array

[180, 196, 127], [192, 196, 127], [222, 234, 187], [236, 252, 201], [242, 247, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #B4C47F, #C0C47F, #DEEABB, #ECFCC9, #F2F7C3 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: #b4c47f; --color-2: #c0c47f; --color-3: #deeabb; --color-4: #ecfcc9; --color-5: #f2f7c3. 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