← Back to Editor

#E7F4E8 · #FCF0E7 · #E8D395 · #F7776D · #A57669

spring

A 5-color spring palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#E7F4E8

Celadon · Beige · Mint Green

HEX
#E7F4E8
RGB
rgb(231, 244, 232)
HSL
hsl(125, 37%, 93%)
HSB
hsb(125, 5%, 96%)
CMYK
cmyk(5%, 0%, 5%, 4%)
Oklch
oklch(95.4% 0.021 147.6)

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

#FCF0E7

Apricot · Linen · Peach Orange

HEX
#FCF0E7
RGB
rgb(252, 240, 231)
HSL
hsl(26, 78%, 95%)
HSB
hsb(26, 8%, 99%)
CMYK
cmyk(0%, 5%, 8%, 1%)
Oklch
oklch(96.2% 0.018 59.5)

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

#E8D395

Goose Yellow · Khaki · Sunflower

HEX
#E8D395
RGB
rgb(232, 211, 149)
HSL
hsl(45, 64%, 75%)
HSB
hsb(45, 36%, 91%)
CMYK
cmyk(0%, 9%, 36%, 9%)
Oklch
oklch(87.0% 0.083 91.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#F7776D

Peach Pink · Salmon · Coral Red

HEX
#F7776D
RGB
rgb(247, 119, 109)
HSL
hsl(4, 90%, 70%)
HSB
hsb(4, 56%, 97%)
CMYK
cmyk(0%, 52%, 56%, 3%)
Oklch
oklch(71.7% 0.159 26.3)

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

#A57669

Crimson · Gray · Passion Red

HEX
#A57669
RGB
rgb(165, 118, 105)
HSL
hsl(13, 25%, 53%)
HSB
hsb(13, 36%, 65%)
CMYK
cmyk(0%, 28%, 36%, 35%)
Oklch
oklch(61.0% 0.063 36.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7F4E8
F4E7F3

Analogous

ECF4E7
E7F4E8
E7F4EE

Triadic

E7F4E8
E8E7F4
F4E8E7

Split-Comp.

E7F4E8
EEE7F4
F4E7EC

Tetradic

E7F4E8
E7ECF4
F4E7F3
F4EEE7

Contrast Matrix WCAG 2.1 Contrast

E7F4E8
FCF0E7
E8D395
F7776D
A57669
—
1.0
Fail
1.3
Fail
2.4
Fail
3.4
AA Large
1.0
Fail
—
1.3
Fail
2.4
Fail
3.5
AA Large
1.3
Fail
1.3
Fail
—
1.8
Fail
2.6
Fail
2.4
Fail
2.4
Fail
1.8
Fail
—
1.4
Fail
3.4
AA Large
3.5
AA Large
2.6
Fail
1.4
Fail
—
White BG
1.1Fail
1.1Fail
1.5Fail
2.7Fail
3.9AA Large
Black BG
18.5AAA
18.8AAA
14.2AAA
7.8AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDEB
F7F7E9
DFDFA4
C0BE6F
91906C

Deuteranopia

ECEBEC
F8F8EA
E0E2A8
C7D170
93976D

Tritanopia

E8EDEE
FBEBEB
E7B0B2
F17172
A36F6F

Achromatopsia

EFEFEF
F3F3F3
D2D2D2
9C9C9C
838383

Shades & Tints Shades & Tints

#E7F4E8

Dark
Light

#FCF0E7

Dark
Light

#E8D395

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7f4e8;
  --color-2: #fcf0e7;
  --color-3: #e8d395;
  --color-4: #f7776d;
  --color-5: #a57669;
}

SCSS

$color-1: #e7f4e8;
$color-2: #fcf0e7;
$color-3: #e8d395;
$color-4: #f7776d;
$color-5: #a57669;

TAILWIND

colors: {
  'brand-1': '#e7f4e8',
  'brand-2': '#fcf0e7',
  'brand-3': '#e8d395',
  'brand-4': '#f7776d',
  'brand-5': '#a57669',
}

RGB Array

[231, 244, 232], [252, 240, 231], [232, 211, 149], [247, 119, 109], [165, 118, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #E7F4E8, #FCF0E7, #E8D395, #F7776D, #A57669 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e7f4e8; --color-2: #fcf0e7; --color-3: #e8d395; --color-4: #f7776d; --color-5: #a57669. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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