#F09999 + #F7D3B0 + #D1B266 + #B4C29F + #B2D1BA · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F09999

Peach Pink · DarkSalmon · Coral Red

HEX

#F09999

RGB

rgb(240, 153, 153)

HSL

hsl(0, 74%, 77%)

HSB

hsb(0, 36%, 94%)

CMYK

cmyk(0%, 36%, 36%, 6%)

Oklch

oklch(77.1% 0.105 19.7)

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

#F7D3B0

Goose Yellow · Wheat · Peach Orange

HEX

#F7D3B0

RGB

rgb(247, 211, 176)

HSL

hsl(30, 82%, 83%)

HSB

hsb(30, 29%, 97%)

CMYK

cmyk(0%, 15%, 29%, 3%)

Oklch

oklch(88.9% 0.061 66.1)

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

#D1B266

Ginger · BurlyWood · Sunflower

HEX

#D1B266

RGB

rgb(209, 178, 102)

HSL

hsl(43, 54%, 61%)

HSB

hsb(43, 51%, 82%)

CMYK

cmyk(0%, 15%, 51%, 18%)

Oklch

oklch(77.5% 0.102 87.8)

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

#B4C29F

Willow Green · DarkGray · Apple Green

HEX

#B4C29F

RGB

rgb(180, 194, 159)

HSL

hsl(84, 22%, 69%)

HSB

hsb(84, 18%, 76%)

CMYK

cmyk(7%, 0%, 18%, 24%)

Oklch

oklch(79.4% 0.050 125.3)

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

#B2D1BA

Celadon · Silver · Apple Green

HEX

#B2D1BA

RGB

rgb(178, 209, 186)

HSL

hsl(135, 25%, 76%)

HSB

hsb(135, 15%, 82%)

CMYK

cmyk(15%, 0%, 11%, 18%)

Oklch

oklch(83.1% 0.046 153.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F09999

99F0F0

Analogous

F099C4

F09999

F0C499

Triadic

F09999

99F099

9999F0

Split-Comp.

F09999

99F0C4

99C4F0

Tetradic

F09999

C4F099

99F0F0

C499F0

Contrast Matrix WCAG 2.1 Contrast

F09999	F7D3B0	D1B266	B4C29F	B2D1BA
—	1.5 Fail	1.1 Fail	1.1 Fail	1.3 Fail
1.5 Fail	—	1.5 Fail	1.3 Fail	1.2 Fail
1.1 Fail	1.5 Fail	—	1.1 Fail	1.2 Fail
1.1 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

2.2Fail

1.4Fail

2.0Fail

1.9Fail

1.7Fail

Black BG

9.7AAA

14.9AAA

10.3AAA

11.2AAA

12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACA99

E7E7B8

C4C378

BABAA7

BFC0C0

Deuteranopia

CFD699

EAECBB

C5C87D

B9B8AA

BEBBC1

Tritanopia

EC9999

F5BFC1

CF878A

B5AEB0

B4C4C5

Achromatopsia

B3B3B3

DADADA

B3B3B3

BABABA

C5C5C5

Shades & Tints Shades & Tints

#F09999

Dark

Light

#F7D3B0

Dark

Light

#D1B266

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f09999;
  --color-2: #f7d3b0;
  --color-3: #d1b266;
  --color-4: #b4c29f;
  --color-5: #b2d1ba;
}

SCSS

$color-1: #f09999;
$color-2: #f7d3b0;
$color-3: #d1b266;
$color-4: #b4c29f;
$color-5: #b2d1ba;

TAILWIND

colors: {
  'brand-1': '#f09999',
  'brand-2': '#f7d3b0',
  'brand-3': '#d1b266',
  'brand-4': '#b4c29f',
  'brand-5': '#b2d1ba',
}

RGB Array

[240, 153, 153], [247, 211, 176], [209, 178, 102], [180, 194, 159], [178, 209, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #F09999, #F7D3B0, #D1B266, #B4C29F, #B2D1BA 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: #f09999; --color-2: #f7d3b0; --color-3: #d1b266; --color-4: #b4c29f; --color-5: #b2d1ba. 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 summer-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