#F77997 + #DEBC9C + #E2D9AD + #ECECBD + #F3E3D6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F77997

Peach Pink · LightCoral · Coral Red

HEX

#F77997

RGB

rgb(247, 121, 151)

HSL

hsl(346, 89%, 72%)

HSB

hsb(346, 51%, 97%)

CMYK

cmyk(0%, 51%, 39%, 3%)

Oklch

oklch(72.9% 0.156 6.7)

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

#DEBC9C

Apricot · BurlyWood · Warm Sun

HEX

#DEBC9C

RGB

rgb(222, 188, 156)

HSL

hsl(29, 50%, 74%)

HSB

hsb(29, 30%, 87%)

CMYK

cmyk(0%, 15%, 30%, 13%)

Oklch

oklch(81.7% 0.058 65.1)

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

#E2D9AD

Fresh Green · Wheat · Lemon Cream

HEX

#E2D9AD

RGB

rgb(226, 217, 173)

HSL

hsl(50, 48%, 78%)

HSB

hsb(50, 23%, 89%)

CMYK

cmyk(0%, 4%, 23%, 11%)

Oklch

oklch(88.2% 0.059 97.8)

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

#ECECBD

Fresh Green · Wheat · Lemon Cream

HEX

#ECECBD

RGB

rgb(236, 236, 189)

HSL

hsl(60, 55%, 83%)

HSB

hsb(60, 20%, 93%)

CMYK

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

Oklch

oklch(93.1% 0.061 107.5)

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

#F3E3D6

Apricot · Beige · Peach Orange

HEX

#F3E3D6

RGB

rgb(243, 227, 214)

HSL

hsl(27, 55%, 90%)

HSB

hsb(27, 12%, 95%)

CMYK

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

Oklch

oklch(92.5% 0.025 61.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F77997

78F7D9

Analogous

F778D5

F77997

F79A78

Triadic

F77997

96F778

7896F7

Split-Comp.

F77997

78F79A

78D5F7

Tetradic

F77997

D5F778

78F7D9

9A78F7

Contrast Matrix WCAG 2.1 Contrast

F77997	DEBC9C	E2D9AD	ECECBD	F3E3D6
—	1.4 Fail	1.8 Fail	2.1 Fail	2.1 Fail
1.4 Fail	—	1.3 Fail	1.5 Fail	1.4 Fail
1.8 Fail	1.3 Fail	—	1.2 Fail	1.1 Fail
2.1 Fail	1.5 Fail	1.2 Fail	—	1.0 Fail
2.1 Fail	1.4 Fail	1.1 Fail	1.0 Fail	—

White BG

2.6Fail

1.8Fail

1.4Fail

1.2Fail

1.3Fail

Black BG

8.1AAA

11.8AAA

14.8AAA

17.3AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BF90

CFCFA4

DEDEB8

ECECC8

ECECD9

Deuteranopia

C8D18E

D1D4A6

DFDFBA

ECECCB

EDEEDA

Tritanopia

F18A89

DCAAAB

E2C0C2

ECD1D3

F2DCDC

Achromatopsia

A2A2A2

C3C3C3

D7D7D7

E7E7E7

E6E6E6

Shades & Tints Shades & Tints

#F77997

Dark

Light

#DEBC9C

Dark

Light

#E2D9AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f77997;
  --color-2: #debc9c;
  --color-3: #e2d9ad;
  --color-4: #ececbd;
  --color-5: #f3e3d6;
}

SCSS

$color-1: #f77997;
$color-2: #debc9c;
$color-3: #e2d9ad;
$color-4: #ececbd;
$color-5: #f3e3d6;

TAILWIND

colors: {
  'brand-1': '#f77997',
  'brand-2': '#debc9c',
  'brand-3': '#e2d9ad',
  'brand-4': '#ececbd',
  'brand-5': '#f3e3d6',
}

RGB Array

[247, 121, 151], [222, 188, 156], [226, 217, 173], [236, 236, 189], [243, 227, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F77997, #DEBC9C, #E2D9AD, #ECECBD, #F3E3D6 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: #f77997; --color-2: #debc9c; --color-3: #e2d9ad; --color-4: #ececbd; --color-5: #f3e3d6. 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 general-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