Purple

#7C18C9

Purple

Color Codes

All color formats for development

HEX

#7C18C9

RGB

rgb(124, 24, 201)

HSL

hsl(274, 79%, 44%)

OKLCH

oklch(0.482 0.239 302.9)

CMYK

cmyk(38%, 88%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

7.42:1

AA ✓AAA ✓

On Black Background

2.83:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F8F1

100

#EFDF

200

#E1C4

300

#CB96

400

#AF5F

500

#9832

600

#7C18

700

#6313

800

#460D

900

#2D09

950

#1C05

Shades

Darker variations

1#7015B5

2#6313A1

3#57108D

4#4A0E79

5#3E0C64

6#320950

7#25073C

8#190528

9#0C0214

Tints

Lighter variations

1#8C1BE2

2#9933E7

3#A64CEA

4#B266ED

5#BF7FF0

6#CC99F3

7#D9B2F6

8#E5CCF9

9#F2E5FC

Tones

Muted variations

1#7B20C0

2#7A29B7

3#7832AE

4#773BA5

5#76449D

6#754D94

7#74568B

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	E1C4 `#E1C4F8`	Secondary backgroundsInput backgroundsDividers
300	CB96 `#CB96F3`	BordersInactive statesPlaceholder text
400	AF5F `#AF5FEC`	Disabled statesSecondary iconsMuted text
500	9832 `#9832E7`	Primary brand colorCTAsActive elementsLinks
600	7C18 `#7C18C9`	Hover statesFocus ringsPrimary buttons hover
700	6313 `#6313A0`	Active/pressed statesDark mode accentsSecondary text
800	460D `#460D72`	Text on light backgroundsHeadingsStrong borders
900	2D09 `#2D0949`	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: #E1C4F8;
  --purple-300: #CB96F3;
  --purple-400: #AF5FEC;
  --purple-500: #9832E7;
  --purple-600: #7C18C9;
  --purple-700: #6313A0;
  --purple-800: #460D72;
  --purple-900: #2D0949;
  --purple-950: #1C052E;
}

Generate More Shades Create Palette Convert Color