Silver

#B4D1D5

Cyan

Color Codes

All color formats for development

HEX
#B4D1D5
RGB
rgb(180, 209, 213)
HSL
hsl(187, 28%, 77%)
OKLCH
oklch(0.841 0.031 206.7)
CMYK
cmyk(15%, 2%, 0%, 16%)

Accessibility

WCAG contrast compliance

On White Background

1.61:1

AA AAA

On Black Background

13.02:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F5F9
100
#E8F1
200
#D5E5
300
#B4D1
400
#8DB9
500
#6CA5
600
#5188
700
#406C
800
#2E4D
900
#1D32
950
#121F

Shades

Darker variations

1#9BC2C7
2#82B2B8
3#69A3AA
4#558F97
5#47777E
6#395F65
7#2A484B
8#1C3032
9#0E1819

Tints

Lighter variations

1#BBD6D9
2#C3DADD
3#CADFE1
4#D2E3E6
5#D9E8EA
6#E1EDEE
7#E8F1F2
8#F0F6F7
9#F7FAFB

Tones

Muted variations

1#B6D0D3
2#B7CED1
3#B9CDD0
4#BACCCE
5#BCCBCD
6#BEC9CB
7#BFC8C9
8#C1C7C8
9#C3C6C6

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F5F9
#F5F9F9
BackgroundsSubtle highlightsCard backgrounds
100
E8F1
#E8F1F2
Light backgroundsTable row hoverSkeleton loading
200
D5E5
#D5E5E7
Secondary backgroundsInput backgroundsDividers
300
B4D1
#B4D1D5
BordersInactive statesPlaceholder text
400
8DB9
#8DB9BF
Disabled statesSecondary iconsMuted text
500
6CA5
#6CA5AC
Primary brand colorCTAsActive elementsLinks
600
5188
#518890
Hover statesFocus ringsPrimary buttons hover
700
406C
#406C72
Active/pressed statesDark mode accentsSecondary text
800
2E4D
#2E4D52
Text on light backgroundsHeadingsStrong borders
900
1D32
#1D3234
Primary textHigh emphasis contentDark headings
950
121F
#121F21
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --silver-50: #F5F9F9;
  --silver-100: #E8F1F2;
  --silver-200: #D5E5E7;
  --silver-300: #B4D1D5;
  --silver-400: #8DB9BF;
  --silver-500: #6CA5AC;
  --silver-600: #518890;
  --silver-700: #406C72;
  --silver-800: #2E4D52;
  --silver-900: #1D3234;
  --silver-950: #121F21;
}
Generate More ShadesCreate PaletteConvert Color