Silver

#ACBFDD

Blue

Color Codes

All color formats for development

HEX
#ACBFDD
RGB
rgb(172, 191, 221)
HSL
hsl(217, 42%, 77%)
OKLCH
oklch(0.8 0.048 259.5)
CMYK
cmyk(22%, 14%, 0%, 13%)

Accessibility

WCAG contrast compliance

On White Background

1.87:1

AA AAA

On Black Background

11.25:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F7
100
#E6EB
200
#D0DB
300
#ACBF
400
#809D
500
#5C81
600
#4165
700
#3451
800
#253A
900
#1825
950
#0F17

Shades

Darker variations

1#90A9D2
2#7493C6
3#587EBB
4#446AA7
5#39598B
6#2E4770
7#223554
8#172338
9#0B121C

Tints

Lighter variations

1#B4C5E0
2#BCCBE4
3#C5D2E7
4#CDD8EB
5#D5DFEE
6#DEE5F1
7#E6ECF5
8#EEF2F8
9#F7F9FC

Tones

Muted variations

1#AEBFDB
2#B1C0D8
3#B3C0D6
4#B6C1D3
5#B8C1D1
6#BAC2CE
7#BDC3CC
8#BFC3C9
9#C2C4C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F7
#F4F7FB
BackgroundsSubtle highlightsCard backgrounds
100
E6EB
#E6EBF5
Light backgroundsTable row hoverSkeleton loading
200
D0DB
#D0DBEC
Secondary backgroundsInput backgroundsDividers
300
ACBF
#ACBFDD
BordersInactive statesPlaceholder text
400
809D
#809DCB
Disabled statesSecondary iconsMuted text
500
5C81
#5C81BC
Primary brand colorCTAsActive elementsLinks
600
4165
#41659F
Hover statesFocus ringsPrimary buttons hover
700
3451
#34517F
Active/pressed statesDark mode accentsSecondary text
800
253A
#253A5B
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: #F4F7FB;
  --silver-100: #E6EBF5;
  --silver-200: #D0DBEC;
  --silver-300: #ACBFDD;
  --silver-400: #809DCB;
  --silver-500: #5C81BC;
  --silver-600: #41659F;
  --silver-700: #34517F;
  --silver-800: #253A5B;
  --silver-900: #18253A;
  --silver-950: #0F1724;
}
Generate More ShadesCreate PaletteConvert Color