← Back to Editor

#393C4D · #F6F6DC · #9B95B1 · #C2C1D1 · #E5E5EF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#393C4D

Indigo · DarkSlateGray · Prussian Blue

HEX
#393C4D
RGB
rgb(57, 60, 77)
HSL
hsl(231, 15%, 26%)
HSB
hsb(231, 26%, 30%)
CMYK
cmyk(26%, 22%, 0%, 70%)
Oklch
oklch(36.0% 0.030 277.0)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#F6F6DC

Fresh Green · Beige · Lemon Cream

HEX
#F6F6DC
RGB
rgb(246, 246, 220)
HSL
hsl(60, 59%, 91%)
HSB
hsb(60, 11%, 96%)
CMYK
cmyk(0%, 0%, 11%, 4%)
Oklch
oklch(96.6% 0.034 107.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#9B95B1

Wisteria · DarkGray · Cobalt Blue

HEX
#9B95B1
RGB
rgb(155, 149, 177)
HSL
hsl(253, 15%, 64%)
HSB
hsb(253, 16%, 69%)
CMYK
cmyk(12%, 16%, 0%, 31%)
Oklch
oklch(68.4% 0.041 295.1)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#C2C1D1

Wisteria · Silver · Cobalt Blue

HEX
#C2C1D1
RGB
rgb(194, 193, 209)
HSL
hsl(244, 15%, 79%)
HSB
hsb(244, 8%, 82%)
CMYK
cmyk(7%, 8%, 0%, 18%)
Oklch
oklch(81.7% 0.022 288.8)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#E5E5EF

Wisteria · Lavender · Sky Blue

HEX
#E5E5EF
RGB
rgb(229, 229, 239)
HSL
hsl(240, 24%, 92%)
HSB
hsb(240, 4%, 94%)
CMYK
cmyk(4%, 4%, 0%, 6%)
Oklch
oklch(92.5% 0.013 286.1)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

393C4D
4C4938

Analogous

38454C
393C4D
3F384C

Triadic

393C4D
4C383B
3B4C38

Split-Comp.

393C4D
4C3F38
454C38

Tetradic

393C4D
4C3845
4C4938
384C3F

Contrast Matrix WCAG 2.1 Contrast

393C4D
F6F6DC
9B95B1
C2C1D1
E5E5EF
—
9.9
AAA
3.8
AA Large
6.1
AA
8.7
AAA
9.9
AAA
—
2.6
Fail
1.6
Fail
1.1
Fail
3.8
AA Large
2.6
Fail
—
1.6
Fail
2.3
Fail
6.1
AA
1.6
Fail
1.6
Fail
—
1.4
Fail
8.7
AAA
1.1
Fail
2.3
Fail
1.4
Fail
—
White BG
10.9AAA
1.1Fail
2.9Fail
1.8Fail
1.3Fail
Black BG
1.9Fail
19.1AAA
7.3AAA
11.8AAA
16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A49
F6F6E2
9898AA
C2C2CD
E5E5ED

Deuteranopia

3A3A48
F6F6E4
9999A9
C2C2CC
E5E5EC

Tritanopia

394645
F6E7E8
9BA5A4
C2CAC9
E5EBEA

Achromatopsia

3D3D3D
F3F3F3
9A9A9A
C3C3C3
E6E6E6

Shades & Tints Shades & Tints

#393C4D

Dark
Light

#F6F6DC

Dark
Light

#9B95B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #393c4d;
  --color-2: #f6f6dc;
  --color-3: #9b95b1;
  --color-4: #c2c1d1;
  --color-5: #e5e5ef;
}

SCSS

$color-1: #393c4d;
$color-2: #f6f6dc;
$color-3: #9b95b1;
$color-4: #c2c1d1;
$color-5: #e5e5ef;

TAILWIND

colors: {
  'brand-1': '#393c4d',
  'brand-2': '#f6f6dc',
  'brand-3': '#9b95b1',
  'brand-4': '#c2c1d1',
  'brand-5': '#e5e5ef',
}

RGB Array

[57, 60, 77], [246, 246, 220], [155, 149, 177], [194, 193, 209], [229, 229, 239]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #393C4D, #F6F6DC, #9B95B1, #C2C1D1, #E5E5EF is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #393c4d; --color-2: #f6f6dc; --color-3: #9b95b1; --color-4: #c2c1d1; --color-5: #e5e5ef. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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