#F09B77 + #E6D1AD + #BCCCA8 + #91C2A5 + #5BA694 · spring - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F09B77

Apricot · DarkSalmon · Warm Sun

HEX

#F09B77

RGB

rgb(240, 155, 119)

HSL

hsl(18, 80%, 70%)

HSB

hsb(18, 50%, 94%)

CMYK

cmyk(0%, 35%, 50%, 6%)

Oklch

oklch(76.7% 0.114 43.6)

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

#E6D1AD

Goose Yellow · Wheat · Peach Orange

HEX

#E6D1AD

RGB

rgb(230, 209, 173)

HSL

hsl(38, 53%, 79%)

HSB

hsb(38, 25%, 90%)

CMYK

cmyk(0%, 9%, 25%, 10%)

Oklch

oklch(86.9% 0.053 81.1)

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

#BCCCA8

Willow Green · Silver · Apple Green

HEX

#BCCCA8

RGB

rgb(188, 204, 168)

HSL

hsl(87, 26%, 73%)

HSB

hsb(87, 18%, 80%)

CMYK

cmyk(8%, 0%, 18%, 20%)

Oklch

oklch(82.3% 0.052 127.0)

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

#91C2A5

Celadon · DarkSeaGreen · Apple Green

HEX

#91C2A5

RGB

rgb(145, 194, 165)

HSL

hsl(144, 29%, 66%)

HSB

hsb(144, 25%, 76%)

CMYK

cmyk(25%, 0%, 15%, 24%)

Oklch

oklch(77.1% 0.066 158.4)

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

#5BA694

Mineral Blue · CadetBlue · Mint Ice

HEX

#5BA694

RGB

rgb(91, 166, 148)

HSL

hsl(166, 30%, 50%)

HSB

hsb(166, 45%, 65%)

CMYK

cmyk(45%, 0%, 11%, 35%)

Oklch

oklch(67.1% 0.080 176.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F09B77

75CBF0

Analogous

F0758E

F09B77

F0D775

Triadic

F09B77

75F09A

9A75F0

Split-Comp.

F09B77

75F0D7

758EF0

Tetradic

F09B77

8EF075

75CBF0

D775F0

Contrast Matrix WCAG 2.1 Contrast

F09B77	E6D1AD	BCCCA8	91C2A5	5BA694
—	1.5 Fail	1.3 Fail	1.1 Fail	1.3 Fail
1.5 Fail	—	1.1 Fail	1.3 Fail	1.9 Fail
1.3 Fail	1.1 Fail	—	1.2 Fail	1.7 Fail
1.1 Fail	1.3 Fail	1.2 Fail	—	1.4 Fail
1.3 Fail	1.9 Fail	1.7 Fail	1.4 Fail	—

White BG

2.2Fail

1.5Fail

1.7Fail

2.0Fail

2.9Fail

Black BG

9.7AAA

14.1AAA

12.3AAA

10.5AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA80

DDDDB6

C3C3B1

A6A7AC

7B7C98

Deuteranopia

D0D782

DEE0B8

C2C1B3

A3A0AE

777299

Tritanopia

EC8788

E5BDBE

BDB8B9

93B2B3

5F9C9D

Achromatopsia

B0B0B0

D3D3D3

C3C3C3

B0B0B0

8E8E8E

Shades & Tints Shades & Tints

#F09B77

Dark

Light

#E6D1AD

Dark

Light

#BCCCA8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f09b77;
  --color-2: #e6d1ad;
  --color-3: #bccca8;
  --color-4: #91c2a5;
  --color-5: #5ba694;
}

SCSS

$color-1: #f09b77;
$color-2: #e6d1ad;
$color-3: #bccca8;
$color-4: #91c2a5;
$color-5: #5ba694;

TAILWIND

colors: {
  'brand-1': '#f09b77',
  'brand-2': '#e6d1ad',
  'brand-3': '#bccca8',
  'brand-4': '#91c2a5',
  'brand-5': '#5ba694',
}

RGB Array

[240, 155, 119], [230, 209, 173], [188, 204, 168], [145, 194, 165], [91, 166, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #F09B77, #E6D1AD, #BCCCA8, #91C2A5, #5BA694 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: #f09b77; --color-2: #e6d1ad; --color-3: #bccca8; --color-4: #91c2a5; --color-5: #5ba694. 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