← Back to Editor

#F9E8F9 · #FF669B · #313037 · #BABCBC · #E4E3E7

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

#F9E8F9

Mauve · SeaShell · Lavender

HEX
#F9E8F9
RGB
rgb(249, 232, 249)
HSL
hsl(300, 59%, 94%)
HSB
hsb(300, 7%, 98%)
CMYK
cmyk(0%, 7%, 0%, 2%)
Oklch
oklch(94.9% 0.029 325.8)

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

#FF669B

Rouge · LightCoral · Rose Pink

HEX
#FF669B
RGB
rgb(255, 102, 155)
HSL
hsl(339, 100%, 70%)
HSB
hsb(339, 60%, 100%)
CMYK
cmyk(0%, 60%, 39%, 0%)
Oklch
oklch(71.7% 0.191 1.6)

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

#313037

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#313037
RGB
rgb(49, 48, 55)
HSL
hsl(249, 7%, 20%)
HSB
hsb(249, 13%, 22%)
CMYK
cmyk(11%, 13%, 0%, 78%)
Oklch
oklch(31.3% 0.012 292.2)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#BABCBC

Silver Gray · Silver · Pearl Gray

HEX
#BABCBC
RGB
rgb(186, 188, 188)
HSL
hsl(180, 1%, 73%)
HSB
hsb(180, 1%, 74%)
CMYK
cmyk(1%, 0%, 0%, 26%)
Oklch
oklch(79.4% 0.002 197.1)

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

#E4E3E7

Wisteria · Lavender · Cloud White

HEX
#E4E3E7
RGB
rgb(228, 227, 231)
HSL
hsl(255, 8%, 90%)
HSB
hsb(255, 2%, 91%)
CMYK
cmyk(1%, 2%, 0%, 9%)
Oklch
oklch(91.8% 0.005 297.7)

Traditional「Wisteria」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9E8F9
E7F9E7

Analogous

F0E7F9
F9E8F9
F9E7F0

Triadic

F9E8F9
F9F9E7
E7F9F9

Split-Comp.

F9E8F9
F0F9E7
E7F9F0

Tetradic

F9E8F9
F9F0E7
E7F9E7
E7F0F9

Contrast Matrix WCAG 2.1 Contrast

F9E8F9
FF669B
313037
BABCBC
E4E3E7
—
2.4
Fail
11.2
AAA
1.6
Fail
1.1
Fail
2.4
Fail
—
4.7
AA
1.4
Fail
2.2
Fail
11.2
AAA
4.7
AA
—
6.8
AA
10.2
AAA
1.6
Fail
1.4
Fail
6.8
AA
—
1.5
Fail
1.1
Fail
2.2
Fail
10.2
AAA
1.5
Fail
—
White BG
1.2Fail
2.8Fail
13.1AAA
1.9Fail
1.3Fail
Black BG
17.9AAA
7.6AAA
1.6Fail
11.0AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F1F5
BDBB8E
313135
BBBBBC
E4E4E6

Deuteranopia

F3F4F4
C6D18B
313135
BBBBBC
E4E4E6

Tritanopia

F8F2F1
F78482
313434
BABCBC
E4E5E5

Achromatopsia

EFEFEF
9A9A9A
313131
BBBBBB
E4E4E4

Shades & Tints Shades & Tints

#F9E8F9

Dark
Light

#FF669B

Dark
Light

#313037

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9e8f9;
  --color-2: #ff669b;
  --color-3: #313037;
  --color-4: #babcbc;
  --color-5: #e4e3e7;
}

SCSS

$color-1: #f9e8f9;
$color-2: #ff669b;
$color-3: #313037;
$color-4: #babcbc;
$color-5: #e4e3e7;

TAILWIND

colors: {
  'brand-1': '#f9e8f9',
  'brand-2': '#ff669b',
  'brand-3': '#313037',
  'brand-4': '#babcbc',
  'brand-5': '#e4e3e7',
}

RGB Array

[249, 232, 249], [255, 102, 155], [49, 48, 55], [186, 188, 188], [228, 227, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9E8F9, #FF669B, #313037, #BABCBC, #E4E3E7 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: #f9e8f9; --color-2: #ff669b; --color-3: #313037; --color-4: #babcbc; --color-5: #e4e3e7. 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