#F6C4DA + #F695BF + #F6DAE8 + #F6E9EF + #F6EDF2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F6C4DA

Rouge · Pink · Cherry Blossom

HEX

#F6C4DA

RGB

rgb(246, 196, 218)

HSL

hsl(334, 74%, 87%)

HSB

hsb(334, 20%, 96%)

CMYK

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

Oklch

oklch(87.1% 0.063 350.3)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F695BF

Rouge · LightPink · Cherry Blossom

HEX

#F695BF

RGB

rgb(246, 149, 191)

HSL

hsl(334, 84%, 77%)

HSB

hsb(334, 39%, 96%)

CMYK

cmyk(0%, 39%, 22%, 4%)

Oklch

oklch(78.2% 0.126 352.9)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F6DAE8

Rouge · Linen · Cherry Blossom

HEX

#F6DAE8

RGB

rgb(246, 218, 232)

HSL

hsl(330, 61%, 91%)

HSB

hsb(330, 11%, 96%)

CMYK

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

Oklch

oklch(91.5% 0.036 346.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F6E9EF

Rouge · Linen · Cherry Blossom

HEX

#F6E9EF

RGB

rgb(246, 233, 239)

HSL

hsl(332, 42%, 94%)

HSB

hsb(332, 5%, 96%)

CMYK

cmyk(0%, 5%, 3%, 4%)

Oklch

oklch(94.6% 0.016 347.6)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F6EDF2

Mauve · SeaShell · Cherry Blossom

HEX

#F6EDF2

RGB

rgb(246, 237, 242)

HSL

hsl(327, 33%, 95%)

HSB

hsb(327, 4%, 96%)

CMYK

cmyk(0%, 4%, 2%, 4%)

Oklch

oklch(95.5% 0.012 342.6)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6C4DA

C5F6E1

Analogous

F6C5F3

F6C4DA

F6C9C5

Triadic

F6C4DA

DBF6C5

C5DBF6

Split-Comp.

F6C4DA

C5F6C9

C5F3F6

Tetradic

F6C4DA

F3F6C5

C5F6E1

C9C5F6

Contrast Matrix WCAG 2.1 Contrast

F6C4DA	F695BF	F6DAE8	F6E9EF	F6EDF2
—	1.4 Fail	1.2 Fail	1.3 Fail	1.3 Fail
1.4 Fail	—	1.6 Fail	1.8 Fail	1.8 Fail
1.2 Fail	1.6 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.8 Fail	1.1 Fail	—	1.0 Fail
1.3 Fail	1.8 Fail	1.1 Fail	1.0 Fail	—

White BG

1.5Fail

2.1Fail

1.3Fail

1.2Fail

1.1Fail

Black BG

13.8AAA

10.0AAA

16.1AAA

17.8AAA

18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0D5

CCCBB5

EAEAE5

F0F0EE

F2F2F1

Deuteranopia

E3E7D3

D2D9B2

ECEEE4

F1F2ED

F3F3F0

Tritanopia

F4D0D0

F1ADAB

F5E2E1

F5ECEC

F6F0F0

Achromatopsia

D5D5D5

B7B7B7

E4E4E4

EEEEEE

F0F0F0

Shades & Tints Shades & Tints

#F6C4DA

Dark

Light

#F695BF

Dark

Light

#F6DAE8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6c4da;
  --color-2: #f695bf;
  --color-3: #f6dae8;
  --color-4: #f6e9ef;
  --color-5: #f6edf2;
}

SCSS

$color-1: #f6c4da;
$color-2: #f695bf;
$color-3: #f6dae8;
$color-4: #f6e9ef;
$color-5: #f6edf2;

TAILWIND

colors: {
  'brand-1': '#f6c4da',
  'brand-2': '#f695bf',
  'brand-3': '#f6dae8',
  'brand-4': '#f6e9ef',
  'brand-5': '#f6edf2',
}

RGB Array

[246, 196, 218], [246, 149, 191], [246, 218, 232], [246, 233, 239], [246, 237, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6C4DA, #F695BF, #F6DAE8, #F6E9EF, #F6EDF2 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: #f6c4da; --color-2: #f695bf; --color-3: #f6dae8; --color-4: #f6e9ef; --color-5: #f6edf2. 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