← Back to Editor

#F9FAFE · #9BB7E9 · #8C91AE · #8E6D86 · #E780C7

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F9FAFE

Azure · Snow · Sky Blue

HEX
#F9FAFE
RGB
rgb(249, 250, 254)
HSL
hsl(228, 71%, 99%)
HSB
hsb(228, 2%, 100%)
CMYK
cmyk(2%, 2%, 0%, 0%)
Oklch
oklch(98.5% 0.005 275.0)

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

#9BB7E9

Azure · LightSteelBlue · Cobalt Blue

HEX
#9BB7E9
RGB
rgb(155, 183, 233)
HSL
hsl(218, 64%, 76%)
HSB
hsb(218, 33%, 91%)
CMYK
cmyk(33%, 21%, 0%, 9%)
Oklch
oklch(77.6% 0.078 261.9)

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

#8C91AE

Azure · LightSlateGray · Cobalt Blue

HEX
#8C91AE
RGB
rgb(140, 145, 174)
HSL
hsl(231, 17%, 62%)
HSB
hsb(231, 20%, 68%)
CMYK
cmyk(20%, 17%, 0%, 32%)
Oklch
oklch(66.3% 0.043 277.5)

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

#8E6D86

Rose Purple · Gray · Violet

HEX
#8E6D86
RGB
rgb(142, 109, 134)
HSL
hsl(315, 13%, 49%)
HSB
hsb(315, 23%, 56%)
CMYK
cmyk(0%, 23%, 6%, 44%)
Oklch
oklch(57.6% 0.055 335.1)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#E780C7

Mauve · Orchid · Lilac Purple

HEX
#E780C7
RGB
rgb(231, 128, 199)
HSL
hsl(319, 68%, 70%)
HSB
hsb(319, 45%, 91%)
CMYK
cmyk(0%, 45%, 14%, 9%)
Oklch
oklch(73.5% 0.152 340.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9FAFE
FEFEFB

Analogous

FBFDFE
F9FAFE
FCFBFE

Triadic

F9FAFE
FEFBFB
FBFEFB

Split-Comp.

F9FAFE
FEFCFB
FDFEFB

Tetradic

F9FAFE
FEFBFD
FEFEFB
FBFEFC

Contrast Matrix WCAG 2.1 Contrast

F9FAFE
9BB7E9
8C91AE
8E6D86
E780C7
—
1.9
Fail
3.0
Fail
4.3
AA Large
2.4
Fail
1.9
Fail
—
1.5
Fail
2.2
Fail
1.2
Fail
3.0
Fail
1.5
Fail
—
1.4
Fail
1.2
Fail
4.3
AA Large
2.2
Fail
1.4
Fail
—
1.8
Fail
2.4
Fail
1.2
Fail
1.2
Fail
1.8
Fail
—
White BG
1.0Fail
2.0Fail
3.1AA Large
4.5AA Large
2.5Fail
Black BG
20.1AAA
10.3AAA
6.8AA
4.7AA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9FD
A7A7DD
8E8EA7
807F80
BAB9B6

Deuteranopia

F9F9FD
A6A3DA
8E8EA5
82847F
C0C8B2

Tritanopia

F9FCFC
9CD3D1
8CA1A0
8C7B7A
E2A8A5

Achromatopsia

FAFAFA
B4B4B4
939393
7A7A7A
A7A7A7

Shades & Tints Shades & Tints

#F9FAFE

Dark
Light

#9BB7E9

Dark
Light

#8C91AE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9fafe;
  --color-2: #9bb7e9;
  --color-3: #8c91ae;
  --color-4: #8e6d86;
  --color-5: #e780c7;
}

SCSS

$color-1: #f9fafe;
$color-2: #9bb7e9;
$color-3: #8c91ae;
$color-4: #8e6d86;
$color-5: #e780c7;

TAILWIND

colors: {
  'brand-1': '#f9fafe',
  'brand-2': '#9bb7e9',
  'brand-3': '#8c91ae',
  'brand-4': '#8e6d86',
  'brand-5': '#e780c7',
}

RGB Array

[249, 250, 254], [155, 183, 233], [140, 145, 174], [142, 109, 134], [231, 128, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9FAFE, #9BB7E9, #8C91AE, #8E6D86, #E780C7 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f9fafe; --color-2: #9bb7e9; --color-3: #8c91ae; --color-4: #8e6d86; --color-5: #e780c7. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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