#FD6C7D + #EFD8CE + #ECF3DF + #DDE5CB + #B1C895 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FD6C7D

Peach Pink · Salmon · Coral Red

HEX

#FD6C7D

RGB

rgb(253, 108, 125)

HSL

hsl(353, 97%, 71%)

HSB

hsb(353, 57%, 99%)

CMYK

cmyk(0%, 57%, 51%, 1%)

Oklch

oklch(71.4% 0.177 15.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EFD8CE

Apricot · Bisque · Peach Orange

HEX

#EFD8CE

RGB

rgb(239, 216, 206)

HSL

hsl(18, 51%, 87%)

HSB

hsb(18, 14%, 94%)

CMYK

cmyk(0%, 10%, 14%, 6%)

Oklch

oklch(89.8% 0.029 45.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#ECF3DF

Willow Green · Beige · Mint Green

HEX

#ECF3DF

RGB

rgb(236, 243, 223)

HSL

hsl(81, 45%, 91%)

HSB

hsb(81, 8%, 95%)

CMYK

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

Oklch

oklch(95.3% 0.027 122.7)

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

#DDE5CB

Willow Green · LightGray · Mint Green

HEX

#DDE5CB

RGB

rgb(221, 229, 203)

HSL

hsl(78, 33%, 85%)

HSB

hsb(78, 11%, 90%)

CMYK

cmyk(3%, 0%, 11%, 10%)

Oklch

oklch(90.9% 0.036 121.0)

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

#B1C895

Willow Green · DarkSeaGreen · Apple Green

HEX

#B1C895

RGB

rgb(177, 200, 149)

HSL

hsl(87, 32%, 68%)

HSB

hsb(87, 25%, 78%)

CMYK

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

Oklch

oklch(80.2% 0.074 127.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD6C7D

6DFDEC

Analogous

FD6DC6

FD6C7D

FDA46D

Triadic

FD6C7D

7EFD6D

6D7EFD

Split-Comp.

FD6C7D

6DFDA4

6DC6FD

Tetradic

FD6C7D

C6FD6D

6DFDEC

A46DFD

Contrast Matrix WCAG 2.1 Contrast

FD6C7D	EFD8CE	ECF3DF	DDE5CB	B1C895
—	2.0 Fail	2.4 Fail	2.1 Fail	1.5 Fail
2.0 Fail	—	1.2 Fail	1.0 Fail	1.3 Fail
2.4 Fail	1.2 Fail	—	1.1 Fail	1.6 Fail
2.1 Fail	1.0 Fail	1.1 Fail	—	1.4 Fail
1.5 Fail	1.3 Fail	1.6 Fail	1.4 Fail	—

White BG

2.8Fail

1.4Fail

1.1Fail

1.3Fail

1.8Fail

Black BG

7.6AAA

15.4AAA

18.5AAA

16.1AAA

11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBD79

E5E5D0

EFEFE4

E0E1D1

BBBBA1

Deuteranopia

C7D278

E6E8D1

EFEEE5

E0DFD3

BAB8A4

Tritanopia

F67675

EED2D3

ECE8E9

DDD6D7

B2ABAD

Achromatopsia

999999

DEDEDE

EFEFEF

E0E0E0

BBBBBB

Shades & Tints Shades & Tints

#FD6C7D

Dark

Light

#EFD8CE

Dark

Light

#ECF3DF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd6c7d;
  --color-2: #efd8ce;
  --color-3: #ecf3df;
  --color-4: #dde5cb;
  --color-5: #b1c895;
}

SCSS

$color-1: #fd6c7d;
$color-2: #efd8ce;
$color-3: #ecf3df;
$color-4: #dde5cb;
$color-5: #b1c895;

TAILWIND

colors: {
  'brand-1': '#fd6c7d',
  'brand-2': '#efd8ce',
  'brand-3': '#ecf3df',
  'brand-4': '#dde5cb',
  'brand-5': '#b1c895',
}

RGB Array

[253, 108, 125], [239, 216, 206], [236, 243, 223], [221, 229, 203], [177, 200, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #FD6C7D, #EFD8CE, #ECF3DF, #DDE5CB, #B1C895 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: #fd6c7d; --color-2: #efd8ce; --color-3: #ecf3df; --color-4: #dde5cb; --color-5: #b1c895. 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