#F8D4E2 + #F49DB4 + #C3A3BA + #9AC3D7 + #C6E2F2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8D4E2

Rouge · Linen · Cherry Blossom

HEX

#F8D4E2

RGB

rgb(248, 212, 226)

HSL

hsl(337, 72%, 90%)

HSB

hsb(337, 15%, 97%)

CMYK

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

Oklch

oklch(90.4% 0.044 352.6)

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

#F49DB4

Rouge · LightPink · Cherry Blossom

HEX

#F49DB4

RGB

rgb(244, 157, 180)

HSL

hsl(344, 80%, 79%)

HSB

hsb(344, 36%, 96%)

CMYK

cmyk(0%, 36%, 26%, 4%)

Oklch

oklch(78.9% 0.107 2.6)

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

#C3A3BA

Mauve · Silver · Lilac Purple

HEX

#C3A3BA

RGB

rgb(195, 163, 186)

HSL

hsl(317, 21%, 70%)

HSB

hsb(317, 16%, 76%)

CMYK

cmyk(0%, 16%, 5%, 24%)

Oklch

oklch(75.1% 0.049 336.2)

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

#9AC3D7

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#9AC3D7

RGB

rgb(154, 195, 215)

HSL

hsl(200, 43%, 72%)

HSB

hsb(200, 28%, 84%)

CMYK

cmyk(28%, 9%, 0%, 16%)

Oklch

oklch(79.4% 0.052 229.2)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#C6E2F2

Sky Blue · LightBlue · Sky Blue

HEX

#C6E2F2

RGB

rgb(198, 226, 242)

HSL

hsl(202, 63%, 86%)

HSB

hsb(202, 18%, 95%)

CMYK

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

Oklch

oklch(89.7% 0.037 232.9)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8D4E2

D3F8EA

Analogous

F8D3F4

F8D4E2

F8D7D3

Triadic

F8D4E2

E1F8D3

D3E1F8

Split-Comp.

F8D4E2

D3F8D7

D3F4F8

Tetradic

F8D4E2

F4F8D3

D3F8EA

D7D3F8

Contrast Matrix WCAG 2.1 Contrast

F8D4E2	F49DB4	C3A3BA	9AC3D7	C6E2F2
—	1.5 Fail	1.7 Fail	1.4 Fail	1.0 Fail
1.5 Fail	—	1.1 Fail	1.1 Fail	1.5 Fail
1.7 Fail	1.1 Fail	—	1.2 Fail	1.7 Fail
1.4 Fail	1.1 Fail	1.2 Fail	—	1.4 Fail
1.0 Fail	1.5 Fail	1.7 Fail	1.4 Fail	—

White BG

1.4Fail

2.0Fail

2.3Fail

1.9Fail

1.3Fail

Black BG

15.5AAA

10.3AAA

9.3AAA

11.2AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8DF

CECEAE

B5B5B4

ACACD2

D2D2EE

Deuteranopia

EBEDDE

D3DAAD

B7B9B3

A9A6D1

D1CEED

Tritanopia

F6DCDB

F0AAA9

C1B0AF

9CCECE

C7EBEA

Achromatopsia

E0E0E0

BABABA

AFAFAF

B9B9B9

DBDBDB

Shades & Tints Shades & Tints

#F8D4E2

Dark

Light

#F49DB4

Dark

Light

#C3A3BA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8d4e2;
  --color-2: #f49db4;
  --color-3: #c3a3ba;
  --color-4: #9ac3d7;
  --color-5: #c6e2f2;
}

SCSS

$color-1: #f8d4e2;
$color-2: #f49db4;
$color-3: #c3a3ba;
$color-4: #9ac3d7;
$color-5: #c6e2f2;

TAILWIND

colors: {
  'brand-1': '#f8d4e2',
  'brand-2': '#f49db4',
  'brand-3': '#c3a3ba',
  'brand-4': '#9ac3d7',
  'brand-5': '#c6e2f2',
}

RGB Array

[248, 212, 226], [244, 157, 180], [195, 163, 186], [154, 195, 215], [198, 226, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8D4E2, #F49DB4, #C3A3BA, #9AC3D7, #C6E2F2 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: #f8d4e2; --color-2: #f49db4; --color-3: #c3a3ba; --color-4: #9ac3d7; --color-5: #c6e2f2. 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