Silver

#ACC6DC

Blue

Color Codes

All color formats for development

HEX
#ACC6DC
RGB
rgb(172, 198, 220)
HSL
hsl(208, 41%, 77%)
OKLCH
oklch(0.814 0.042 243.8)
CMYK
cmyk(22%, 10%, 0%, 14%)

Accessibility

WCAG contrast compliance

On White Background

1.77:1

AA AAA

On Black Background

11.87:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F4F8
100
#E6EE
200
#D0DF
300
#ACC6
400
#81A8
500
#5D8F
600
#4273
700
#355C
800
#2641
900
#182A
950
#0F1A

Shades

Darker variations

1#91B3D1
2#75A0C5
3#598DBA
4#4679A6
5#3A658A
6#2E516F
7#233D53
8#172837
9#0C141C

Tints

Lighter variations

1#B5CCE0
2#BDD1E3
3#C5D7E7
4#CDDDEA
5#D6E2EE
6#DEE8F1
7#E6EEF5
8#EEF4F8
9#F7F9FC

Tones

Muted variations

1#AFC6DA
2#B1C6D8
3#B4C5D5
4#B6C5D3
5#B8C5D0
6#BBC5CE
7#BDC5CC
8#C0C5C9
9#C2C5C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F4F8
#F4F8FA
BackgroundsSubtle highlightsCard backgrounds
100
E6EE
#E6EEF4
Light backgroundsTable row hoverSkeleton loading
200
D0DF
#D0DFEB
Secondary backgroundsInput backgroundsDividers
300
ACC6
#ACC6DC
BordersInactive statesPlaceholder text
400
81A8
#81A8CA
Disabled statesSecondary iconsMuted text
500
5D8F
#5D8FBB
Primary brand colorCTAsActive elementsLinks
600
4273
#42739E
Hover statesFocus ringsPrimary buttons hover
700
355C
#355C7E
Active/pressed statesDark mode accentsSecondary text
800
2641
#26415A
Text on light backgroundsHeadingsStrong borders
900
182A
#182A3A
Primary textHigh emphasis contentDark headings
950
0F1A
#0F1A24
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F4F8FA;
  --silver-100: #E6EEF4;
  --silver-200: #D0DFEB;
  --silver-300: #ACC6DC;
  --silver-400: #81A8CA;
  --silver-500: #5D8FBB;
  --silver-600: #42739E;
  --silver-700: #355C7E;
  --silver-800: #26415A;
  --silver-900: #182A3A;
  --silver-950: #0F1A24;
}
Generate More ShadesCreate PaletteConvert Color