Purple

#7315CB

Purple

Color Codes

All color formats for development

HEX

#7315CB

RGB

rgb(115, 21, 203)

HSL

hsl(271, 81%, 44%)

OKLCH

oklch(0.472 0.241 299)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

7.78:1

AA ✓AAA ✓

On Black Background

2.70:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F8F1

100

#EEDF

200

#DFC3

300

#C695

400

#A85D

500

#8F2F

600

#7315

700

#5C11

800

#410C

900

#2A08

950

#1A05

Shades

Darker variations

1#6813B7

2#5C11A2

3#510F8E

4#450D7A

5#3A0B66

6#2E0951

7#23063D

8#170429

9#0C0214

Tints

Lighter variations

1#8218E5

2#9030E9

3#9E4AEC

4#AC64EF

5#BA7EF1

6#C798F4

7#D5B1F7

8#E3CBFA

9#F1E5FC

Tones

Muted variations

1#731EC2

2#7327B9

3#7231B0

4#723AA7

5#72439E

6#714C95

7#71558B

8#715E82

9#716779

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F8F1 `#F8F1FE`	BackgroundsSubtle highlightsCard backgrounds
100	EEDF `#EEDFFC`	Light backgroundsTable row hoverSkeleton loading
200	DFC3 `#DFC3F9`	Secondary backgroundsInput backgroundsDividers
300	C695 `#C695F4`	BordersInactive statesPlaceholder text
400	A85D `#A85DEE`	Disabled statesSecondary iconsMuted text
500	8F2F `#8F2FE9`	Primary brand colorCTAsActive elementsLinks
600	7315 `#7315CB`	Hover statesFocus ringsPrimary buttons hover
700	5C11 `#5C11A2`	Active/pressed statesDark mode accentsSecondary text
800	410C `#410C73`	Text on light backgroundsHeadingsStrong borders
900	2A08 `#2A084A`	Primary textHigh emphasis contentDark headings
950	1A05 `#1A052E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F8F1FE;
  --purple-100: #EEDFFC;
  --purple-200: #DFC3F9;
  --purple-300: #C695F4;
  --purple-400: #A85DEE;
  --purple-500: #8F2FE9;
  --purple-600: #7315CB;
  --purple-700: #5C11A2;
  --purple-800: #410C73;
  --purple-900: #2A084A;
  --purple-950: #1A052E;
}

Generate More Shades Create Palette Convert Color