#F18A8E + #F2B09A + #F3EAA5 + #9E8159 + #D7D8B6 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F18A8E

Peach Pink · LightCoral · Coral Red

HEX

#F18A8E

RGB

rgb(241, 138, 142)

HSL

hsl(358, 79%, 74%)

HSB

hsb(358, 43%, 95%)

CMYK

cmyk(0%, 43%, 41%, 5%)

Oklch

oklch(74.5% 0.126 18.1)

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

#F2B09A

Apricot · BurlyWood · Peach Orange

HEX

#F2B09A

RGB

rgb(242, 176, 154)

HSL

hsl(15, 77%, 78%)

HSB

hsb(15, 36%, 95%)

CMYK

cmyk(0%, 27%, 36%, 5%)

Oklch

oklch(81.4% 0.084 39.2)

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

#F3EAA5

Fresh Green · Wheat · Lemon Cream

HEX

#F3EAA5

RGB

rgb(243, 234, 165)

HSL

hsl(53, 76%, 80%)

HSB

hsb(53, 32%, 95%)

CMYK

cmyk(0%, 4%, 32%, 5%)

Oklch

oklch(92.8% 0.088 101.6)

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

#9E8159

Ochre · Gray · Amber Brown

HEX

#9E8159

RGB

rgb(158, 129, 89)

HSL

hsl(35, 28%, 48%)

HSB

hsb(35, 44%, 62%)

CMYK

cmyk(0%, 18%, 44%, 38%)

Oklch

oklch(62.1% 0.066 75.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#D7D8B6

Fresh Green · LightGray · Lemon Cream

HEX

#D7D8B6

RGB

rgb(215, 216, 182)

HSL

hsl(62, 30%, 78%)

HSB

hsb(62, 16%, 85%)

CMYK

cmyk(0%, 0%, 16%, 15%)

Oklch

oklch(87.3% 0.045 108.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F18A8E

88F1EE

Analogous

F188C0

F18A8E

F1B988

Triadic

F18A8E

8CF188

888CF1

Split-Comp.

F18A8E

88F1B9

88C0F1

Tetradic

F18A8E

C0F188

88F1EE

B988F1

Contrast Matrix WCAG 2.1 Contrast

F18A8E	F2B09A	F3EAA5	9E8159	D7D8B6
—	1.3 Fail	2.0 Fail	1.5 Fail	1.6 Fail
1.3 Fail	—	1.5 Fail	2.0 Fail	1.3 Fail
2.0 Fail	1.5 Fail	—	3.0 Fail	1.2 Fail
1.5 Fail	2.0 Fail	3.0 Fail	—	2.5 Fail
1.6 Fail	1.3 Fail	1.2 Fail	2.5 Fail	—

White BG

2.4Fail

1.8Fail

1.2Fail

3.7AA Large

1.5Fail

Black BG

8.8AAA

11.5AAA

17.1AAA

5.7AA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C38D

D5D59F

EFEFB6

919163

D7D7BE

Deuteranopia

CAD28D

D9DEA1

F0F0BA

939565

D7D7C0

Tritanopia

EC8C8C

EFA4A4

F3C3C6

9D6A6C

D7C5C6

Achromatopsia

A9A9A9

C1C1C1

E5E5E5

858585

D4D4D4

Shades & Tints Shades & Tints

#F18A8E

Dark

Light

#F2B09A

Dark

Light

#F3EAA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f18a8e;
  --color-2: #f2b09a;
  --color-3: #f3eaa5;
  --color-4: #9e8159;
  --color-5: #d7d8b6;
}

SCSS

$color-1: #f18a8e;
$color-2: #f2b09a;
$color-3: #f3eaa5;
$color-4: #9e8159;
$color-5: #d7d8b6;

TAILWIND

colors: {
  'brand-1': '#f18a8e',
  'brand-2': '#f2b09a',
  'brand-3': '#f3eaa5',
  'brand-4': '#9e8159',
  'brand-5': '#d7d8b6',
}

RGB Array

[241, 138, 142], [242, 176, 154], [243, 234, 165], [158, 129, 89], [215, 216, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #F18A8E, #F2B09A, #F3EAA5, #9E8159, #D7D8B6 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: #f18a8e; --color-2: #f2b09a; --color-3: #f3eaa5; --color-4: #9e8159; --color-5: #d7d8b6. 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