← Back to Editor

#171717 · #A0B2C0 · #BBC3C6 · #D3D4D6 · #F6F7F2

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

#171717

Ink Black · Black · Jet Black

HEX
#171717
RGB
rgb(23, 23, 23)
HSL
hsl(0, 0%, 9%)
HSB
hsb(0, 0%, 9%)
CMYK
cmyk(0%, 0%, 0%, 91%)
Oklch
oklch(20.5% 0.000 89.9)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#A0B2C0

Sky Blue · DarkGray · Cobalt Blue

HEX
#A0B2C0
RGB
rgb(160, 178, 192)
HSL
hsl(206, 20%, 69%)
HSB
hsb(206, 17%, 75%)
CMYK
cmyk(17%, 7%, 0%, 25%)
Oklch
oklch(75.4% 0.028 241.3)

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

#BBC3C6

Sky Blue · Silver · Pearl Gray

HEX
#BBC3C6
RGB
rgb(187, 195, 198)
HSL
hsl(196, 9%, 75%)
HSB
hsb(196, 6%, 78%)
CMYK
cmyk(6%, 2%, 0%, 22%)
Oklch
oklch(81.2% 0.010 222.1)

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

#D3D4D6

Silver Gray · LightGray · Pearl Gray

HEX
#D3D4D6
RGB
rgb(211, 212, 214)
HSL
hsl(220, 4%, 83%)
HSB
hsb(220, 1%, 84%)
CMYK
cmyk(1%, 1%, 0%, 16%)
Oklch
oklch(87.0% 0.003 264.5)

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

#F6F7F2

Willow Green · SeaShell · Mint Green

HEX
#F6F7F2
RGB
rgb(246, 247, 242)
HSL
hsl(72, 24%, 96%)
HSB
hsb(72, 2%, 97%)
CMYK
cmyk(0%, 0%, 2%, 3%)
Oklch
oklch(97.4% 0.007 115.7)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

171717
171717

Analogous

171717
171717
171717

Triadic

171717
171717
171717

Split-Comp.

171717
171717
171717

Tetradic

171717
171717
171717
171717

Contrast Matrix WCAG 2.1 Contrast

171717
A0B2C0
BBC3C6
D3D4D6
F6F7F2
—
8.2
AAA
10.0
AAA
12.1
AAA
16.7
AAA
8.2
AAA
—
1.2
Fail
1.5
Fail
2.0
Fail
10.0
AAA
1.2
Fail
—
1.2
Fail
1.7
Fail
12.1
AAA
1.5
Fail
1.2
Fail
—
1.4
Fail
16.7
AAA
2.0
Fail
1.7
Fail
1.4
Fail
—
White BG
17.9AAA
2.2Fail
1.8Fail
1.5Fail
1.1Fail
Black BG
1.2Fail
9.6AAA
11.7AAA
14.2AAA
19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171717
A8A8BD
BEBFC5
D3D3D6
F6F6F3

Deuteranopia

171717
A7A5BC
BEBDC5
D3D3D5
F6F6F3

Tritanopia

171717
A1BAB9
BBC5C5
D3D5D5
F6F4F4

Achromatopsia

171717
AEAEAE
C1C1C1
D4D4D4
F6F6F6

Shades & Tints Shades & Tints

#171717

Dark
Light

#A0B2C0

Dark
Light

#BBC3C6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #171717;
  --color-2: #a0b2c0;
  --color-3: #bbc3c6;
  --color-4: #d3d4d6;
  --color-5: #f6f7f2;
}

SCSS

$color-1: #171717;
$color-2: #a0b2c0;
$color-3: #bbc3c6;
$color-4: #d3d4d6;
$color-5: #f6f7f2;

TAILWIND

colors: {
  'brand-1': '#171717',
  'brand-2': '#a0b2c0',
  'brand-3': '#bbc3c6',
  'brand-4': '#d3d4d6',
  'brand-5': '#f6f7f2',
}

RGB Array

[23, 23, 23], [160, 178, 192], [187, 195, 198], [211, 212, 214], [246, 247, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #171717, #A0B2C0, #BBC3C6, #D3D4D6, #F6F7F2 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: #171717; --color-2: #a0b2c0; --color-3: #bbc3c6; --color-4: #d3d4d6; --color-5: #f6f7f2. 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