Silver

#ACBDDC

Blue

Color Codes

All color formats for development

HEX
#ACBDDC
RGB
rgb(172, 189, 220)
HSL
hsl(219, 41%, 77%)
OKLCH
oklch(0.796 0.048 262.5)
CMYK
cmyk(22%, 14%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.90:1

AA AAA

On Black Background

11.07:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F6
100
#E6EB
200
#D0DA
300
#ACBD
400
#819B
500
#5D7E
600
#4262
700
#354E
800
#2638
900
#1824
950
#0F16

Shades

Darker variations

1#91A7D1
2#7591C5
3#597BBA
4#4667A6
5#3A568A
6#2E456F
7#233453
8#172237
9#0C111C

Tints

Lighter variations

1#B5C4E0
2#BDCAE3
3#C5D1E7
4#CDD7EA
5#D6DEEE
6#DEE5F1
7#E6EBF5
8#EEF2F8
9#F7F8FC

Tones

Muted variations

1#AFBEDA
2#B1BFD8
3#B4BFD5
4#B6C0D3
5#B8C1D0
6#BBC1CE
7#BDC2CC
8#C0C3C9
9#C2C4C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F6
#F4F6FA
BackgroundsSubtle highlightsCard backgrounds
100
E6EB
#E6EBF4
Light backgroundsTable row hoverSkeleton loading
200
D0DA
#D0DAEB
Secondary backgroundsInput backgroundsDividers
300
ACBD
#ACBDDC
BordersInactive statesPlaceholder text
400
819B
#819BCA
Disabled statesSecondary iconsMuted text
500
5D7E
#5D7EBB
Primary brand colorCTAsActive elementsLinks
600
4262
#42629E
Hover statesFocus ringsPrimary buttons hover
700
354E
#354E7E
Active/pressed statesDark mode accentsSecondary text
800
2638
#26385A
Text on light backgroundsHeadingsStrong borders
900
1824
#18243A
Primary textHigh emphasis contentDark headings
950
0F16
#0F1624
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F6FA;
  --silver-100: #E6EBF4;
  --silver-200: #D0DAEB;
  --silver-300: #ACBDDC;
  --silver-400: #819BCA;
  --silver-500: #5D7EBB;
  --silver-600: #42629E;
  --silver-700: #354E7E;
  --silver-800: #26385A;
  --silver-900: #18243A;
  --silver-950: #0F1624;
}
Generate More ShadesCreate PaletteConvert Color