Purple

#7C16CA

Purple

Color Codes

All color formats for development

HEX

#7C16CA

RGB

rgb(124, 22, 202)

HSL

hsl(274, 80%, 44%)

OKLCH

oklch(0.482 0.241 302.7)

CMYK

cmyk(39%, 89%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

7.43:1

AA ✓AAA ✓

On Black Background

2.82:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F8F1

100

#EFDF

200

#E1C3

300

#CB95

400

#AF5E

500

#9830

600

#7C16

700

#6312

800

#470D

900

#2D08

950

#1C05

Shades

Darker variations

1#7014B6

2#6312A2

3#57108D

4#4B0D79

5#3E0B65

6#320951

7#25073D

8#190428

9#0C0214

Tints

Lighter variations

1#8C19E4

2#9931E8

3#A64BEB

4#B265EE

5#BF7EF1

6#CC98F4

7#D9B2F6

8#E5CCF9

9#F2E5FC

Tones

Muted variations

1#7B1FC1

2#7A28B8

3#7931AF

4#773AA6

5#76439D

6#754C94

7#74558B

8#735E82

9#716779

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F8F1 `#F8F1FD`	BackgroundsSubtle highlightsCard backgrounds
100	EFDF `#EFDFFB`	Light backgroundsTable row hoverSkeleton loading
200	E1C3 `#E1C3F8`	Secondary backgroundsInput backgroundsDividers
300	CB95 `#CB95F3`	BordersInactive statesPlaceholder text
400	AF5E `#AF5EED`	Disabled statesSecondary iconsMuted text
500	9830 `#9830E8`	Primary brand colorCTAsActive elementsLinks
600	7C16 `#7C16CA`	Hover statesFocus ringsPrimary buttons hover
700	6312 `#6312A1`	Active/pressed statesDark mode accentsSecondary text
800	470D `#470D73`	Text on light backgroundsHeadingsStrong borders
900	2D08 `#2D0849`	Primary textHigh emphasis contentDark headings
950	1C05 `#1C052E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F8F1FD;
  --purple-100: #EFDFFB;
  --purple-200: #E1C3F8;
  --purple-300: #CB95F3;
  --purple-400: #AF5EED;
  --purple-500: #9830E8;
  --purple-600: #7C16CA;
  --purple-700: #6312A1;
  --purple-800: #470D73;
  --purple-900: #2D0849;
  --purple-950: #1C052E;
}

Generate More Shades Create Palette Convert Color