Black

#010132

Blue

Color Codes

All color formats for development

HEX
#010132
RGB
rgb(1, 1, 50)
HSL
hsl(240, 96%, 10%)
OKLCH
oklch(0.148 0.096 266.1)
CMYK
cmyk(98%, 98%, 0%, 80%)

Accessibility

WCAG contrast compliance

On White Background

19.97:1

AA AAA

On Black Background

1.05:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F0F0
100
#DCDC
200
#BEBE
300
#8C8C
400
#5050
500
#1E1E
600
#0404
700
#0404
800
#0303
900
#0202
950
#0101

Shades

Darker variations

1#01012D
2#010128
3#010123
4#01011E
5#010119
6#000014
7#00000F
8#00000A
9#000005

Tints

Lighter variations

1#02025F
2#03038C
3#0404B9
4#0505E6
5#1E1EFA
6#4B4BFB
7#7878FC
8#A5A5FD
9#D2D2FE

Tones

Muted variations

1#030330
2#06062D
3#08082B
4#0B0B28
5#0D0D26
6#101023
7#121221
8#15151E
9#17171C

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F0F0
#F0F0FF
BackgroundsSubtle highlightsCard backgrounds
100
DCDC
#DCDCFE
Light backgroundsTable row hoverSkeleton loading
200
BEBE
#BEBEFE
Secondary backgroundsInput backgroundsDividers
300
8C8C
#8C8CFD
BordersInactive statesPlaceholder text
400
5050
#5050FB
Disabled statesSecondary iconsMuted text
500
1E1E
#1E1EFA
Primary brand colorCTAsActive elementsLinks
600
0404
#0404DC
Hover statesFocus ringsPrimary buttons hover
700
0404
#0404AF
Active/pressed statesDark mode accentsSecondary text
800
0303
#03037D
Text on light backgroundsHeadingsStrong borders
900
0202
#020250
Primary textHigh emphasis contentDark headings
950
0101
#010132
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --black-50: #F0F0FF;
  --black-100: #DCDCFE;
  --black-200: #BEBEFE;
  --black-300: #8C8CFD;
  --black-400: #5050FB;
  --black-500: #1E1EFA;
  --black-600: #0404DC;
  --black-700: #0404AF;
  --black-800: #03037D;
  --black-900: #020250;
  --black-950: #010132;
}
Generate More ShadesCreate PaletteConvert Color