Silver

#ACBFDC

Blue

Color Codes

All color formats for development

HEX
#ACBFDC
RGB
rgb(172, 191, 220)
HSL
hsl(216, 41%, 77%)
OKLCH
oklch(0.8 0.046 258.8)
CMYK
cmyk(22%, 13%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.87:1

AA AAA

On Black Background

11.24:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F7
100
#E6EC
200
#D0DB
300
#ACC0
400
#819E
500
#5D83
600
#4267
700
#3552
800
#263B
900
#1825
950
#0F17

Shades

Darker variations

1#91AAD1
2#7595C5
3#5980BA
4#466CA6
5#3A5A8A
6#2E486F
7#233653
8#172437
9#0C121C

Tints

Lighter variations

1#B5C6E0
2#BDCCE3
3#C5D3E7
4#CDD9EA
5#D6DFEE
6#DEE6F1
7#E6ECF5
8#EEF2F8
9#F7F9FC

Tones

Muted variations

1#AFC0DA
2#B1C1D8
3#B4C1D5
4#B6C1D3
5#B8C2D0
6#BBC2CE
7#BDC3CC
8#C0C3C9
9#C2C4C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F7
#F4F7FA
BackgroundsSubtle highlightsCard backgrounds
100
E6EC
#E6ECF4
Light backgroundsTable row hoverSkeleton loading
200
D0DB
#D0DBEB
Secondary backgroundsInput backgroundsDividers
300
ACC0
#ACC0DC
BordersInactive statesPlaceholder text
400
819E
#819ECA
Disabled statesSecondary iconsMuted text
500
5D83
#5D83BB
Primary brand colorCTAsActive elementsLinks
600
4267
#42679E
Hover statesFocus ringsPrimary buttons hover
700
3552
#35527E
Active/pressed statesDark mode accentsSecondary text
800
263B
#263B5A
Text on light backgroundsHeadingsStrong borders
900
1825
#18253A
Primary textHigh emphasis contentDark headings
950
0F17
#0F1724
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F7FA;
  --silver-100: #E6ECF4;
  --silver-200: #D0DBEB;
  --silver-300: #ACC0DC;
  --silver-400: #819ECA;
  --silver-500: #5D83BB;
  --silver-600: #42679E;
  --silver-700: #35527E;
  --silver-800: #263B5A;
  --silver-900: #18253A;
  --silver-950: #0F1724;
}
Generate More ShadesCreate PaletteConvert Color