Black

#290132

Pink

Color Codes

All color formats for development

HEX
#290132
RGB
rgb(41, 1, 50)
HSL
hsl(289, 96%, 10%)
OKLCH
oklch(0.206 0.096 319.5)
CMYK
cmyk(18%, 98%, 0%, 80%)

Accessibility

WCAG contrast compliance

On White Background

18.35:1

AA AAA

On Black Background

1.14:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FCF0
100
#F8DC
200
#F2BE
300
#E88C
400
#DC50
500
#D21E
600
#B404
700
#9004
800
#6703
900
#4202
950
#2901

Shades

Darker variations

1#25012D
2#210128
3#1D0123
4#19011E
5#150119
6#100014
7#0C000F
8#08000A
9#040005

Tints

Lighter variations

1#4E025F
2#73038C
3#9804B9
4#BD05E6
5#D21EFA
6#DB4BFB
7#E478FC
8#EDA5FD
9#F6D2FE

Tones

Muted variations

1#270330
2#26062D
3#24082B
4#230B28
5#210D26
6#201023
7#1E1221
8#1D151E
9#1B171C

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FCF0
#FCF0FF
BackgroundsSubtle highlightsCard backgrounds
100
F8DC
#F8DCFE
Light backgroundsTable row hoverSkeleton loading
200
F2BE
#F2BEFE
Secondary backgroundsInput backgroundsDividers
300
E88C
#E88CFD
BordersInactive statesPlaceholder text
400
DC50
#DC50FB
Disabled statesSecondary iconsMuted text
500
D21E
#D21EFA
Primary brand colorCTAsActive elementsLinks
600
B404
#B404DC
Hover statesFocus ringsPrimary buttons hover
700
9004
#9004AF
Active/pressed statesDark mode accentsSecondary text
800
6703
#67037D
Text on light backgroundsHeadingsStrong borders
900
4202
#420250
Primary textHigh emphasis contentDark headings
950
2901
#290132
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --black-50: #FCF0FF;
  --black-100: #F8DCFE;
  --black-200: #F2BEFE;
  --black-300: #E88CFD;
  --black-400: #DC50FB;
  --black-500: #D21EFA;
  --black-600: #B404DC;
  --black-700: #9004AF;
  --black-800: #67037D;
  --black-900: #420250;
  --black-950: #290132;
}
Generate More ShadesCreate PaletteConvert Color