#F08189 + #DEC281 + #C9DE8E + #8EBF98 + #6CA8A0 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F08189

Peach Pink · LightCoral · Coral Red

HEX

#F08189

RGB

rgb(240, 129, 137)

HSL

hsl(356, 79%, 72%)

HSB

hsb(356, 46%, 94%)

CMYK

cmyk(0%, 46%, 43%, 6%)

Oklch

oklch(72.8% 0.136 16.5)

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

#DEC281

Ginger · BurlyWood · Sunflower

HEX

#DEC281

RGB

rgb(222, 194, 129)

HSL

hsl(42, 58%, 69%)

HSB

hsb(42, 42%, 87%)

CMYK

cmyk(0%, 13%, 42%, 13%)

Oklch

oklch(82.3% 0.089 87.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C9DE8E

Willow Green · Khaki · Apple Green

HEX

#C9DE8E

RGB

rgb(201, 222, 142)

HSL

hsl(76, 55%, 71%)

HSB

hsb(76, 36%, 87%)

CMYK

cmyk(9%, 0%, 36%, 13%)

Oklch

oklch(86.6% 0.106 120.6)

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

#8EBF98

Celadon · DarkSeaGreen · Apple Green

HEX

#8EBF98

RGB

rgb(142, 191, 152)

HSL

hsl(132, 28%, 65%)

HSB

hsb(132, 26%, 75%)

CMYK

cmyk(26%, 0%, 20%, 25%)

Oklch

oklch(75.9% 0.076 150.5)

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

#6CA8A0

Mineral Blue · CadetBlue · Lake Green

HEX

#6CA8A0

RGB

rgb(108, 168, 160)

HSL

hsl(172, 26%, 54%)

HSB

hsb(172, 36%, 66%)

CMYK

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

Oklch

oklch(68.8% 0.064 185.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F08189

7FF0E8

Analogous

F07FBF

F08189

F0B07F

Triadic

F08189

87F07F

7F87F0

Split-Comp.

F08189

7FF0B0

7FBFF0

Tetradic

F08189

BFF07F

7FF0E8

B07FF0

Contrast Matrix WCAG 2.1 Contrast

F08189	DEC281	C9DE8E	8EBF98	6CA8A0
—	1.5 Fail	1.7 Fail	1.2 Fail	1.1 Fail
1.5 Fail	—	1.2 Fail	1.2 Fail	1.6 Fail
1.7 Fail	1.2 Fail	—	1.4 Fail	1.8 Fail
1.2 Fail	1.2 Fail	1.4 Fail	—	1.3 Fail
1.1 Fail	1.6 Fail	1.8 Fail	1.3 Fail	—

White BG

2.6Fail

1.7Fail

1.5Fail

2.1Fail

2.7Fail

Black BG

8.2AAA

12.1AAA

14.3AAA

10.1AAA

7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BF87

D2D291

D2D2A1

A3A4A1

8687A2

Deuteranopia

C6CF87

D4D695

D1CFA6

A09DA4

837EA2

Tritanopia

EA8685

DD9DA0

CAB1B4

90A9AB

6FA3A4

Achromatopsia

A3A3A3

C3C3C3

CFCFCF

ACACAC

959595

Shades & Tints Shades & Tints

#F08189

Dark

Light

#DEC281

Dark

Light

#C9DE8E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f08189;
  --color-2: #dec281;
  --color-3: #c9de8e;
  --color-4: #8ebf98;
  --color-5: #6ca8a0;
}

SCSS

$color-1: #f08189;
$color-2: #dec281;
$color-3: #c9de8e;
$color-4: #8ebf98;
$color-5: #6ca8a0;

TAILWIND

colors: {
  'brand-1': '#f08189',
  'brand-2': '#dec281',
  'brand-3': '#c9de8e',
  'brand-4': '#8ebf98',
  'brand-5': '#6ca8a0',
}

RGB Array

[240, 129, 137], [222, 194, 129], [201, 222, 142], [142, 191, 152], [108, 168, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #F08189, #DEC281, #C9DE8E, #8EBF98, #6CA8A0 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: #f08189; --color-2: #dec281; --color-3: #c9de8e; --color-4: #8ebf98; --color-5: #6ca8a0. 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