← Back to Editor

#A3A3A3 · #BFBFBF · #D5DDEB · #C2D3F0 · #9AB2DB

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

WorkspaceReading

Color Details Color Details

#A3A3A3

Ash · DarkGray · Silver Sand

HEX
#A3A3A3
RGB
rgb(163, 163, 163)
HSL
hsl(0, 0%, 64%)
HSB
hsb(0, 0%, 64%)
CMYK
cmyk(0%, 0%, 0%, 36%)
Oklch
oklch(71.5% 0.000 89.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BFBFBF

Silver Gray · Silver · Pearl Gray

HEX
#BFBFBF
RGB
rgb(191, 191, 191)
HSL
hsl(0, 0%, 75%)
HSB
hsb(0, 0%, 75%)
CMYK
cmyk(0%, 0%, 0%, 25%)
Oklch
oklch(80.5% 0.000 89.9)

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

#D5DDEB

Azure · Lavender · Sky Blue

HEX
#D5DDEB
RGB
rgb(213, 221, 235)
HSL
hsl(218, 35%, 88%)
HSB
hsb(218, 9%, 92%)
CMYK
cmyk(9%, 6%, 0%, 8%)
Oklch
oklch(89.6% 0.021 261.8)

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

#C2D3F0

Azure · LightBlue · Sky Blue

HEX
#C2D3F0
RGB
rgb(194, 211, 240)
HSL
hsl(218, 61%, 85%)
HSB
hsb(218, 19%, 94%)
CMYK
cmyk(19%, 12%, 0%, 6%)
Oklch
oklch(86.3% 0.044 261.2)

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

#9AB2DB

Azure · LightSteelBlue · Cobalt Blue

HEX
#9AB2DB
RGB
rgb(154, 178, 219)
HSL
hsl(218, 47%, 73%)
HSB
hsb(218, 30%, 86%)
CMYK
cmyk(30%, 19%, 0%, 14%)
Oklch
oklch(76.0% 0.065 261.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3A3A3
A3A3A3

Analogous

A3A3A3
A3A3A3
A3A3A3

Triadic

A3A3A3
A3A3A3
A3A3A3

Split-Comp.

A3A3A3
A3A3A3
A3A3A3

Tetradic

A3A3A3
A3A3A3
A3A3A3
A3A3A3

Contrast Matrix WCAG 2.1 Contrast

A3A3A3
BFBFBF
D5DDEB
C2D3F0
9AB2DB
—
1.4
Fail
1.8
Fail
1.7
Fail
1.2
Fail
1.4
Fail
—
1.3
Fail
1.2
Fail
1.2
Fail
1.8
Fail
1.3
Fail
—
1.1
Fail
1.6
Fail
1.7
Fail
1.2
Fail
1.1
Fail
—
1.4
Fail
1.2
Fail
1.2
Fail
1.6
Fail
1.4
Fail
—
White BG
2.5Fail
1.8Fail
1.4Fail
1.5Fail
2.2Fail
Black BG
8.3AAA
11.4AAA
15.4AAA
13.9AAA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3A3
BFBFBF
D8D9E8
C9CAE9
A4A5D1

Deuteranopia

A3A3A3
BFBFBF
D8D7E7
C8C7E7
A3A1CF

Tritanopia

A3A3A3
BFBFBF
D5E5E4
C3E3E2
9BC9C8

Achromatopsia

A3A3A3
BFBFBF
DCDCDC
D1D1D1
AFAFAF

Shades & Tints Shades & Tints

#A3A3A3

Dark
Light

#BFBFBF

Dark
Light

#D5DDEB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3a3a3;
  --color-2: #bfbfbf;
  --color-3: #d5ddeb;
  --color-4: #c2d3f0;
  --color-5: #9ab2db;
}

SCSS

$color-1: #a3a3a3;
$color-2: #bfbfbf;
$color-3: #d5ddeb;
$color-4: #c2d3f0;
$color-5: #9ab2db;

TAILWIND

colors: {
  'brand-1': '#a3a3a3',
  'brand-2': '#bfbfbf',
  'brand-3': '#d5ddeb',
  'brand-4': '#c2d3f0',
  'brand-5': '#9ab2db',
}

RGB Array

[163, 163, 163], [191, 191, 191], [213, 221, 235], [194, 211, 240], [154, 178, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3A3A3, #BFBFBF, #D5DDEB, #C2D3F0, #9AB2DB is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #a3a3a3; --color-2: #bfbfbf; --color-3: #d5ddeb; --color-4: #c2d3f0; --color-5: #9ab2db. 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 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