#F4EDE2 + #F7CAA9 + #E998A0 + #AF7CA6 + #838292 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4EDE2

Goose Yellow · Linen · Peach Orange

HEX

#F4EDE2

RGB

rgb(244, 237, 226)

HSL

hsl(37, 45%, 92%)

HSB

hsb(37, 7%, 96%)

CMYK

cmyk(0%, 3%, 7%, 4%)

Oklch

oklch(94.9% 0.016 79.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F7CAA9

Apricot · Wheat · Peach Orange

HEX

#F7CAA9

RGB

rgb(247, 202, 169)

HSL

hsl(25, 83%, 82%)

HSB

hsb(25, 32%, 97%)

CMYK

cmyk(0%, 18%, 32%, 3%)

Oklch

oklch(87.0% 0.067 58.0)

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

#E998A0

Peach Pink · DarkSalmon · Coral Red

HEX

#E998A0

RGB

rgb(233, 152, 160)

HSL

hsl(354, 65%, 75%)

HSB

hsb(354, 35%, 91%)

CMYK

cmyk(0%, 35%, 31%, 9%)

Oklch

oklch(76.3% 0.098 13.2)

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

#AF7CA6

Rose Purple · DarkGray · Violet

HEX

#AF7CA6

RGB

rgb(175, 124, 166)

HSL

hsl(311, 24%, 59%)

HSB

hsb(311, 29%, 69%)

CMYK

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

Oklch

oklch(65.1% 0.085 332.9)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#838292

Ash · LightSlateGray · Warm Gray

HEX

#838292

RGB

rgb(131, 130, 146)

HSL

hsl(244, 7%, 54%)

HSB

hsb(244, 11%, 57%)

CMYK

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

Oklch

oklch(61.3% 0.024 288.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4EDE2

E1E8F4

Analogous

F4E4E1

F4EDE2

F2F4E1

Triadic

F4EDE2

E1F4ED

EDE1F4

Split-Comp.

F4EDE2

E1F2F4

E4E1F4

Tetradic

F4EDE2

E1F4E4

E1E8F4

F4E1F2

Contrast Matrix WCAG 2.1 Contrast

F4EDE2	F7CAA9	E998A0	AF7CA6	838292
—	1.3 Fail	1.9 Fail	2.9 Fail	3.2 AA Large
1.3 Fail	—	1.5 Fail	2.2 Fail	2.5 Fail
1.9 Fail	1.5 Fail	—	1.5 Fail	1.7 Fail
2.9 Fail	2.2 Fail	1.5 Fail	—	1.1 Fail
3.2 AA Large	2.5 Fail	1.7 Fail	1.1 Fail	—

White BG

1.2Fail

1.5Fail

2.2Fail

3.4AA Large

3.8AA Large

Black BG

18.1AAA

14.0AAA

9.5AAA

6.3AA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1E5

E4E3B1

C6C59E

99989C

83838E

Deuteranopia

F1F2E5

E6E9B3

CBD19E

9CA099

83838D

Tritanopia

F4E7E7

F5B7B9

E59D9C

AC9492

838B8A

Achromatopsia

EEEEEE

D4D4D4

B1B1B1

909090

848484

Shades & Tints Shades & Tints

#F4EDE2

Dark

Light

#F7CAA9

Dark

Light

#E998A0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4ede2;
  --color-2: #f7caa9;
  --color-3: #e998a0;
  --color-4: #af7ca6;
  --color-5: #838292;
}

SCSS

$color-1: #f4ede2;
$color-2: #f7caa9;
$color-3: #e998a0;
$color-4: #af7ca6;
$color-5: #838292;

TAILWIND

colors: {
  'brand-1': '#f4ede2',
  'brand-2': '#f7caa9',
  'brand-3': '#e998a0',
  'brand-4': '#af7ca6',
  'brand-5': '#838292',
}

RGB Array

[244, 237, 226], [247, 202, 169], [233, 152, 160], [175, 124, 166], [131, 130, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #F4EDE2, #F7CAA9, #E998A0, #AF7CA6, #838292 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: #f4ede2; --color-2: #f7caa9; --color-3: #e998a0; --color-4: #af7ca6; --color-5: #838292. 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