Silver

#A6A9E2

Blue

Color Codes

All color formats for development

HEX
#A6A9E2
RGB
rgb(166, 169, 226)
HSL
hsl(237, 51%, 77%)
OKLCH
oklch(0.753 0.082 281.9)
CMYK
cmyk(27%, 25%, 0%, 11%)

Accessibility

WCAG contrast compliance

On White Background

2.24:1

AA AAA

On Black Background

9.39:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F3F4
100
#E4E5
200
#CDCF
300
#A6A9
400
#787D
500
#5258
600
#373D
700
#2C30
800
#1F22
900
#1416
950
#0C0E

Shades

Darker variations

1#898DD9
2#6B70CF
3#4D53C5
4#3A40B2
5#303594
6#262A77
7#1D2059
8#13153B
9#0A0B1E

Tints

Lighter variations

1#AFB2E5
2#B8BBE8
3#C1C3EB
4#CACCEE
5#D3D4F1
6#DCDDF4
7#E4E5F6
8#EDEEF9
9#F6F6FC

Tones

Muted variations

1#A9ACDF
2#ACAFDC
3#AFB2D9
4#B2B4D6
5#B5B7D3
6#B8BAD0
7#BBBCCD
8#BEBFCA
9#C1C2C7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F3F4
#F3F4FB
BackgroundsSubtle highlightsCard backgrounds
100
E4E5
#E4E5F6
Light backgroundsTable row hoverSkeleton loading
200
CDCF
#CDCFEF
Secondary backgroundsInput backgroundsDividers
300
A6A9
#A6A9E2
BordersInactive statesPlaceholder text
400
787D
#787DD3
Disabled statesSecondary iconsMuted text
500
5258
#5258C7
Primary brand colorCTAsActive elementsLinks
600
373D
#373DA9
Hover statesFocus ringsPrimary buttons hover
700
2C30
#2C3087
Active/pressed statesDark mode accentsSecondary text
800
1F22
#1F2260
Text on light backgroundsHeadingsStrong borders
900
1416
#14163E
Primary textHigh emphasis contentDark headings
950
0C0E
#0C0E27
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F3F4FB;
  --silver-100: #E4E5F6;
  --silver-200: #CDCFEF;
  --silver-300: #A6A9E2;
  --silver-400: #787DD3;
  --silver-500: #5258C7;
  --silver-600: #373DA9;
  --silver-700: #2C3087;
  --silver-800: #1F2260;
  --silver-900: #14163E;
  --silver-950: #0C0E27;
}
Generate More ShadesCreate PaletteConvert Color