#F77EC9 + #D4BED3 + #C5DECE + #EBE5C5 + #FFD0B5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F77EC9

Mauve · Orchid · Rose Pink

HEX

#F77EC9

RGB

rgb(247, 126, 201)

HSL

hsl(323, 88%, 73%)

HSB

hsb(323, 49%, 97%)

CMYK

cmyk(0%, 49%, 19%, 3%)

Oklch

oklch(75.2% 0.170 343.9)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#D4BED3

Mauve · LightGray · Lilac Purple

HEX

#D4BED3

RGB

rgb(212, 190, 211)

HSL

hsl(303, 20%, 79%)

HSB

hsb(303, 10%, 83%)

CMYK

cmyk(0%, 10%, 0%, 17%)

Oklch

oklch(82.6% 0.038 327.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#C5DECE

Celadon · LightGray · Mint Green

HEX

#C5DECE

RGB

rgb(197, 222, 206)

HSL

hsl(142, 27%, 82%)

HSB

hsb(142, 11%, 87%)

CMYK

cmyk(11%, 0%, 7%, 13%)

Oklch

oklch(87.8% 0.034 157.6)

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

#EBE5C5

Fresh Green · Bisque · Lemon Cream

HEX

#EBE5C5

RGB

rgb(235, 229, 197)

HSL

hsl(51, 49%, 85%)

HSB

hsb(51, 16%, 92%)

CMYK

cmyk(0%, 3%, 16%, 8%)

Oklch

oklch(91.8% 0.043 98.4)

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

#FFD0B5

Apricot · Wheat · Peach Orange

HEX

#FFD0B5

RGB

rgb(255, 208, 181)

HSL

hsl(22, 100%, 85%)

HSB

hsb(22, 29%, 100%)

CMYK

cmyk(0%, 18%, 29%, 0%)

Oklch

oklch(89.1% 0.064 51.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F77EC9

7EF7AC

Analogous

E97EF7

F77EC9

F77E8C

Triadic

F77EC9

C8F77E

7EC8F7

Split-Comp.

F77EC9

8CF77E

7EF7E9

Tetradic

F77EC9

F7E97E

7EF7AC

7E8CF7

Contrast Matrix WCAG 2.1 Contrast

F77EC9	D4BED3	C5DECE	EBE5C5	FFD0B5
—	1.4 Fail	1.7 Fail	1.9 Fail	1.7 Fail
1.4 Fail	—	1.2 Fail	1.4 Fail	1.2 Fail
1.7 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
1.9 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
1.7 Fail	1.2 Fail	1.0 Fail	1.1 Fail	—

White BG

2.4Fail

1.7Fail

1.4Fail

1.3Fail

1.4Fail

Black BG

8.8AAA

12.1AAA

14.7AAA

16.5AAA

14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C2B7

CACACE

D0D0D2

E8E8CD

EBEABC

Deuteranopia

CAD3B3

CCCDCD

CECCD3

E9E9CF

EDF1BD

Tritanopia

F1A9A5

D3CAC9

C6D5D6

EBD3D4

FDC1C2

Achromatopsia

ABABAB

C7C7C7

D5D5D5

E3E3E3

DBDBDB

Shades & Tints Shades & Tints

#F77EC9

Dark

Light

#D4BED3

Dark

Light

#C5DECE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f77ec9;
  --color-2: #d4bed3;
  --color-3: #c5dece;
  --color-4: #ebe5c5;
  --color-5: #ffd0b5;
}

SCSS

$color-1: #f77ec9;
$color-2: #d4bed3;
$color-3: #c5dece;
$color-4: #ebe5c5;
$color-5: #ffd0b5;

TAILWIND

colors: {
  'brand-1': '#f77ec9',
  'brand-2': '#d4bed3',
  'brand-3': '#c5dece',
  'brand-4': '#ebe5c5',
  'brand-5': '#ffd0b5',
}

RGB Array

[247, 126, 201], [212, 190, 211], [197, 222, 206], [235, 229, 197], [255, 208, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F77EC9, #D4BED3, #C5DECE, #EBE5C5, #FFD0B5 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: #f77ec9; --color-2: #d4bed3; --color-3: #c5dece; --color-4: #ebe5c5; --color-5: #ffd0b5. 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