#F6A4C8 + #D0A5BA + #B7B1B8 + #B7BAF7 + #9ED7E7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F6A4C8

Rouge · LightPink · Cherry Blossom

HEX

#F6A4C8

RGB

rgb(246, 164, 200)

HSL

hsl(334, 82%, 80%)

HSB

hsb(334, 33%, 96%)

CMYK

cmyk(0%, 33%, 19%, 4%)

Oklch

oklch(80.9% 0.106 351.8)

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

#D0A5BA

Rouge · Silver · Rose Pink

HEX

#D0A5BA

RGB

rgb(208, 165, 186)

HSL

hsl(331, 31%, 73%)

HSB

hsb(331, 21%, 82%)

CMYK

cmyk(0%, 21%, 11%, 18%)

Oklch

oklch(76.7% 0.058 347.6)

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

#B7B1B8

Silver Gray · Silver · Pearl Gray

HEX

#B7B1B8

RGB

rgb(183, 177, 184)

HSL

hsl(291, 5%, 71%)

HSB

hsb(291, 4%, 72%)

CMYK

cmyk(1%, 4%, 0%, 28%)

Oklch

oklch(76.7% 0.012 321.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#B7BAF7

Azure · LightSteelBlue · Sky Blue

HEX

#B7BAF7

RGB

rgb(183, 186, 247)

HSL

hsl(237, 80%, 84%)

HSB

hsb(237, 26%, 97%)

CMYK

cmyk(26%, 25%, 0%, 3%)

Oklch

oklch(80.8% 0.086 282.1)

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

#9ED7E7

Sky Blue · LightBlue · Glacier Blue

HEX

#9ED7E7

RGB

rgb(158, 215, 231)

HSL

hsl(193, 60%, 76%)

HSB

hsb(193, 32%, 91%)

CMYK

cmyk(32%, 7%, 0%, 9%)

Oklch

oklch(84.5% 0.062 217.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6A4C8

A2F6D2

Analogous

F6A2F0

F6A4C8

F6A8A2

Triadic

F6A4C8

C6F6A2

A2C6F6

Split-Comp.

F6A4C8

A2F6A8

A2F0F6

Tetradic

F6A4C8

F0F6A2

A2F6D2

A8A2F6

Contrast Matrix WCAG 2.1 Contrast

F6A4C8	D0A5BA	B7B1B8	B7BAF7	9ED7E7
—	1.1 Fail	1.1 Fail	1.0 Fail	1.2 Fail
1.1 Fail	—	1.0 Fail	1.2 Fail	1.4 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.3 Fail
1.0 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.2 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

1.9Fail

2.1Fail

1.8Fail

1.6Fail

Black BG

11.1AAA

9.8AAA

10.0AAA

11.4AAA

13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2BF

BDBDB5

B4B4B6

B8B8E8

B7B7E3

Deuteranopia

D7DDBD

C0C3B4

B5B5B6

B8B8E5

B3AFE2

Tritanopia

F2B8B7

CEB1B0

B7B5B5

B7DDDA

A1E0DF

Achromatopsia

C1C1C1

B4B4B4

C0C0C0

C8C8C8

Shades & Tints Shades & Tints

#F6A4C8

Dark

Light

#D0A5BA

Dark

Light

#B7B1B8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6a4c8;
  --color-2: #d0a5ba;
  --color-3: #b7b1b8;
  --color-4: #b7baf7;
  --color-5: #9ed7e7;
}

SCSS

$color-1: #f6a4c8;
$color-2: #d0a5ba;
$color-3: #b7b1b8;
$color-4: #b7baf7;
$color-5: #9ed7e7;

TAILWIND

colors: {
  'brand-1': '#f6a4c8',
  'brand-2': '#d0a5ba',
  'brand-3': '#b7b1b8',
  'brand-4': '#b7baf7',
  'brand-5': '#9ed7e7',
}

RGB Array

[246, 164, 200], [208, 165, 186], [183, 177, 184], [183, 186, 247], [158, 215, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6A4C8, #D0A5BA, #B7B1B8, #B7BAF7, #9ED7E7 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: #f6a4c8; --color-2: #d0a5ba; --color-3: #b7b1b8; --color-4: #b7baf7; --color-5: #9ed7e7. 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