#FFBDC5 + #F9C0BE + #ECC5BD + #D9CAC0 + #C1D0C5 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFBDC5

Peach Pink · Pink · Cherry Blossom

HEX

#FFBDC5

RGB

rgb(255, 189, 197)

HSL

hsl(353, 100%, 87%)

HSB

hsb(353, 26%, 100%)

CMYK

cmyk(0%, 26%, 23%, 0%)

Oklch

oklch(86.1% 0.077 10.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F9C0BE

Peach Pink · LightPink · Cherry Blossom

HEX

#F9C0BE

RGB

rgb(249, 192, 190)

HSL

hsl(2, 83%, 86%)

HSB

hsb(2, 24%, 98%)

CMYK

cmyk(0%, 23%, 24%, 2%)

Oklch

oklch(85.8% 0.066 20.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#ECC5BD

Peach Pink · Pink · Cherry Blossom

HEX

#ECC5BD

RGB

rgb(236, 197, 189)

HSL

hsl(10, 55%, 83%)

HSB

hsb(10, 20%, 93%)

CMYK

cmyk(0%, 17%, 20%, 7%)

Oklch

oklch(85.5% 0.046 31.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#D9CAC0

Apricot · LightGray · Peach Orange

HEX

#D9CAC0

RGB

rgb(217, 202, 192)

HSL

hsl(24, 25%, 80%)

HSB

hsb(24, 12%, 85%)

CMYK

cmyk(0%, 7%, 12%, 15%)

Oklch

oklch(84.9% 0.022 56.1)

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

#C1D0C5

Celadon · Silver · Apple Green

HEX

#C1D0C5

RGB

rgb(193, 208, 197)

HSL

hsl(136, 14%, 79%)

HSB

hsb(136, 7%, 82%)

CMYK

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

Oklch

oklch(84.3% 0.022 154.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBDC5

BDFFF7

Analogous

FFBDE6

FFBDC5

FFD6BD

Triadic

FFBDC5

C4FFBD

BDC4FF

Split-Comp.

FFBDC5

BDFFD6

BDE6FF

Tetradic

FFBDC5

E6FFBD

BDFFF7

D6BDFF

Contrast Matrix WCAG 2.1 Contrast

FFBDC5	F9C0BE	ECC5BD	D9CAC0	C1D0C5
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.6Fail

Black BG

13.3AAA

13.2AAA

13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2C3

E0E0BE

DBDBBF

D3D2C2

C7C8C8

Deuteranopia

E6EBC3

E4E8BF

DDE0BF

D3D4C3

C7C6C8

Tritanopia

FCC2C1

F6BFBF

EAC0C1

D8C4C5

C2CACA

Achromatopsia

D2D2D2

D1D1D1

D0D0D0

CDCDCD

CACACA

Shades & Tints Shades & Tints

#FFBDC5

Dark

Light

#F9C0BE

Dark

Light

#ECC5BD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbdc5;
  --color-2: #f9c0be;
  --color-3: #ecc5bd;
  --color-4: #d9cac0;
  --color-5: #c1d0c5;
}

SCSS

$color-1: #ffbdc5;
$color-2: #f9c0be;
$color-3: #ecc5bd;
$color-4: #d9cac0;
$color-5: #c1d0c5;

TAILWIND

colors: {
  'brand-1': '#ffbdc5',
  'brand-2': '#f9c0be',
  'brand-3': '#ecc5bd',
  'brand-4': '#d9cac0',
  'brand-5': '#c1d0c5',
}

RGB Array

[255, 189, 197], [249, 192, 190], [236, 197, 189], [217, 202, 192], [193, 208, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #FFBDC5, #F9C0BE, #ECC5BD, #D9CAC0, #C1D0C5 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: #ffbdc5; --color-2: #f9c0be; --color-3: #ecc5bd; --color-4: #d9cac0; --color-5: #c1d0c5. 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