Purple

#7D11A2

Pink

Color Codes

All color formats for development

HEX

#7D11A2

RGB

rgb(125, 17, 162)

HSL

hsl(285, 81%, 35%)

OKLCH

oklch(0.447 0.21 314.5)

CMYK

cmyk(23%, 90%, 0%, 36%)

Accessibility

WCAG contrast compliance

On White Background

8.49:1

AA ✓AAA ✓

On Black Background

2.47:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FAF1

100

#F4DF

200

#EBC3

300

#DC95

400

#CA5D

500

#BB2F

600

#9E15

700

#7D11

800

#5A0C

900

#3908

950

#2405

Shades

Darker variations

1#710F91

2#640E81

3#580C71

4#4B0A61

5#3F0851

6#320741

7#260530

8#190320

9#0D0210

Tints

Lighter variations

1#9514C0

2#AC17DE

3#BA2DE9

4#C44BEC

5#CE69EF

6#D887F2

7#E1A5F6

8#EBC3F9

9#F5E1FC

Tones

Muted variations

1#7A189A

2#761F93

3#73278C

4#6F2E85

5#6B357D

6#683C76

7#64446F

8#604B68

9#5D5260

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FAF1 `#FAF1FE`	BackgroundsSubtle highlightsCard backgrounds
100	F4DF `#F4DFFC`	Light backgroundsTable row hoverSkeleton loading
200	EBC3 `#EBC3F9`	Secondary backgroundsInput backgroundsDividers
300	DC95 `#DC95F4`	BordersInactive statesPlaceholder text
400	CA5D `#CA5DEE`	Disabled statesSecondary iconsMuted text
500	BB2F `#BB2FE9`	Primary brand colorCTAsActive elementsLinks
600	9E15 `#9E15CB`	Hover statesFocus ringsPrimary buttons hover
700	7D11 `#7D11A2`	Active/pressed statesDark mode accentsSecondary text
800	5A0C `#5A0C73`	Text on light backgroundsHeadingsStrong borders
900	3908 `#39084A`	Primary textHigh emphasis contentDark headings
950	2405 `#24052E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FAF1FE;
  --purple-100: #F4DFFC;
  --purple-200: #EBC3F9;
  --purple-300: #DC95F4;
  --purple-400: #CA5DEE;
  --purple-500: #BB2FE9;
  --purple-600: #9E15CB;
  --purple-700: #7D11A2;
  --purple-800: #5A0C73;
  --purple-900: #39084A;
  --purple-950: #24052E;
}

Generate More Shades Create Palette Convert Color