#E7A8C1 + #D89197 + #C5877A + #D1A98A + #E0C7A0 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E7A8C1

Rouge · LightPink · Cherry Blossom

HEX

#E7A8C1

RGB

rgb(231, 168, 193)

HSL

hsl(336, 57%, 78%)

HSB

hsb(336, 27%, 91%)

CMYK

cmyk(0%, 27%, 16%, 9%)

Oklch

oklch(79.8% 0.080 353.5)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#D89197

Peach Pink · DarkSalmon · Coral Red

HEX

#D89197

RGB

rgb(216, 145, 151)

HSL

hsl(355, 48%, 71%)

HSB

hsb(355, 33%, 85%)

CMYK

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

Oklch

oklch(72.9% 0.086 13.9)

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

#C5877A

Peach Pink · DarkSalmon · Coral Red

HEX

#C5877A

RGB

rgb(197, 135, 122)

HSL

hsl(10, 39%, 63%)

HSB

hsb(10, 38%, 77%)

CMYK

cmyk(0%, 31%, 38%, 23%)

Oklch

oklch(68.2% 0.079 32.3)

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

#D1A98A

Apricot · Tan · Warm Sun

HEX

#D1A98A

RGB

rgb(209, 169, 138)

HSL

hsl(26, 44%, 68%)

HSB

hsb(26, 34%, 82%)

CMYK

cmyk(0%, 19%, 34%, 18%)

Oklch

oklch(76.3% 0.063 59.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#E0C7A0

Goose Yellow · BurlyWood · Warm Sun

HEX

#E0C7A0

RGB

rgb(224, 199, 160)

HSL

hsl(37, 51%, 75%)

HSB

hsb(37, 29%, 88%)

CMYK

cmyk(0%, 11%, 29%, 12%)

Oklch

oklch(84.1% 0.059 78.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7A8C1

A7E7CD

Analogous

E7A7E0

E7A8C1

E7ADA7

Triadic

E7A8C1

C1E7A7

A7C1E7

Split-Comp.

E7A8C1

A7E7AD

A7E0E7

Tetradic

E7A8C1

E0E7A7

A7E7CD

ADA7E7

Contrast Matrix WCAG 2.1 Contrast

E7A8C1	D89197	C5877A	D1A98A	E0C7A0
—	1.3 Fail	1.5 Fail	1.1 Fail	1.2 Fail
1.3 Fail	—	1.2 Fail	1.2 Fail	1.5 Fail
1.5 Fail	1.2 Fail	—	1.4 Fail	1.8 Fail
1.1 Fail	1.2 Fail	1.4 Fail	—	1.3 Fail
1.2 Fail	1.5 Fail	1.8 Fail	1.3 Fail	—

White BG

2.0Fail

2.5Fail

2.9Fail

2.2Fail

1.6Fail

Black BG

10.8AAA

8.4AAA

7.1AAA

9.8AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCBBB

B9B996

AAAA7D

C0BF92

D5D5A9

Deuteranopia

CFD4BA

BDC395

AEB27E

C2C593

D7D8AC

Tritanopia

E4B6B5

D49494

C28080

CF9799

DFB1B3

Achromatopsia

BEBEBE

A7A7A7

989898

B1B1B1

CACACA

Shades & Tints Shades & Tints

#E7A8C1

Dark

Light

#D89197

Dark

Light

#C5877A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7a8c1;
  --color-2: #d89197;
  --color-3: #c5877a;
  --color-4: #d1a98a;
  --color-5: #e0c7a0;
}

SCSS

$color-1: #e7a8c1;
$color-2: #d89197;
$color-3: #c5877a;
$color-4: #d1a98a;
$color-5: #e0c7a0;

TAILWIND

colors: {
  'brand-1': '#e7a8c1',
  'brand-2': '#d89197',
  'brand-3': '#c5877a',
  'brand-4': '#d1a98a',
  'brand-5': '#e0c7a0',
}

RGB Array

[231, 168, 193], [216, 145, 151], [197, 135, 122], [209, 169, 138], [224, 199, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #E7A8C1, #D89197, #C5877A, #D1A98A, #E0C7A0 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: #e7a8c1; --color-2: #d89197; --color-3: #c5877a; --color-4: #d1a98a; --color-5: #e0c7a0. 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