Black

#2E0132

Pink

Color Codes

All color formats for development

HEX
#2E0132
RGB
rgb(46, 1, 50)
HSL
hsl(295, 96%, 10%)
OKLCH
oklch(0.216 0.099 324.6)
CMYK
cmyk(8%, 98%, 0%, 80%)

Accessibility

WCAG contrast compliance

On White Background

18.00:1

AA AAA

On Black Background

1.17:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF0
100
#FBDC
200
#F8BE
300
#F38C
400
#ED50
500
#E81E
600
#CA04
700
#A104
800
#7303
900
#4902
950
#2E01

Shades

Darker variations

1#29012D
2#250128
3#200123
4#1C011E
5#170119
6#120014
7#0E000F
8#09000A
9#050005

Tints

Lighter variations

1#57025F
2#81038C
3#AA04B9
4#D305E6
5#E81EFA
6#ED4BFB
7#F178FC
8#F6A5FD
9#FAD2FE

Tones

Muted variations

1#2C0330
2#2A062D
3#28082B
4#260B28
5#240D26
6#221023
7#201221
8#1E151E
9#1C171C

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF0
#FDF0FF
BackgroundsSubtle highlightsCard backgrounds
100
FBDC
#FBDCFE
Light backgroundsTable row hoverSkeleton loading
200
F8BE
#F8BEFE
Secondary backgroundsInput backgroundsDividers
300
F38C
#F38CFD
BordersInactive statesPlaceholder text
400
ED50
#ED50FB
Disabled statesSecondary iconsMuted text
500
E81E
#E81EFA
Primary brand colorCTAsActive elementsLinks
600
CA04
#CA04DC
Hover statesFocus ringsPrimary buttons hover
700
A104
#A104AF
Active/pressed statesDark mode accentsSecondary text
800
7303
#73037D
Text on light backgroundsHeadingsStrong borders
900
4902
#490250
Primary textHigh emphasis contentDark headings
950
2E01
#2E0132
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --black-50: #FDF0FF;
  --black-100: #FBDCFE;
  --black-200: #F8BEFE;
  --black-300: #F38CFD;
  --black-400: #ED50FB;
  --black-500: #E81EFA;
  --black-600: #CA04DC;
  --black-700: #A104AF;
  --black-800: #73037D;
  --black-900: #490250;
  --black-950: #2E0132;
}
Generate More ShadesCreate PaletteConvert Color