Purple

#7C15CB

Purple

Color Codes

All color formats for development

HEX

#7C15CB

RGB

rgb(124, 21, 203)

HSL

hsl(274, 81%, 44%)

OKLCH

oklch(0.483 0.242 302.5)

CMYK

cmyk(39%, 90%, 0%, 20%)

Accessibility

WCAG contrast compliance

On White Background

7.43: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

#E1C3

300

#CB95

400

#AF5D

500

#992F

600

#7C15

700

#6311

800

#470C

900

#2D08

950

#1C05

Shades

Darker variations

1#7013B7

2#6311A2

3#570F8E

4#4B0D7A

5#3E0B66

6#320951

7#25063D

8#190429

9#0C0214

Tints

Lighter variations

1#8C18E5

2#9930E9

3#A64AEC

4#B364EF

5#BF7EF1

6#CC98F4

7#D9B1F7

8#E6CBFA

9#F2E5FC

Tones

Muted variations

1#7B1EC2

2#7A27B9

3#7931B0

4#773AA7

5#76439E

6#754C95

7#74558B

8#735E82

9#716779

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F8F1 `#F8F1FE`	BackgroundsSubtle highlightsCard backgrounds
100	EFDF `#EFDFFC`	Light backgroundsTable row hoverSkeleton loading
200	E1C3 `#E1C3F9`	Secondary backgroundsInput backgroundsDividers
300	CB95 `#CB95F4`	BordersInactive statesPlaceholder text
400	AF5D `#AF5DEE`	Disabled statesSecondary iconsMuted text
500	992F `#992FE9`	Primary brand colorCTAsActive elementsLinks
600	7C15 `#7C15CB`	Hover statesFocus ringsPrimary buttons hover
700	6311 `#6311A2`	Active/pressed statesDark mode accentsSecondary text
800	470C `#470C73`	Text on light backgroundsHeadingsStrong borders
900	2D08 `#2D084A`	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: #F8F1FE;
  --purple-100: #EFDFFC;
  --purple-200: #E1C3F9;
  --purple-300: #CB95F4;
  --purple-400: #AF5DEE;
  --purple-500: #992FE9;
  --purple-600: #7C15CB;
  --purple-700: #6311A2;
  --purple-800: #470C73;
  --purple-900: #2D084A;
  --purple-950: #1C052E;
}

Generate More Shades Create Palette Convert Color