Purple

#8014CC

Purple

Color Codes

All color formats for development

HEX

#8014CC

RGB

rgb(128, 20, 204)

HSL

hsl(275, 82%, 44%)

OKLCH

oklch(0.488 0.244 303.9)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

7.27:1

AA ✓AAA ✓

On Black Background

2.89:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F8F1

100

#F0DF

200

#E2C3

300

#CC94

400

#B25D

500

#9C2E

600

#8014

700

#6510

800

#480B

900

#2E07

950

#1D05

Shades

Darker variations

1#7312B8

2#6610A3

3#590E8F

4#4D0C7B

5#400A66

6#330852

7#26063D

8#1A0429

9#0D0214

Tints

Lighter variations

1#9017E6

2#9C2FEA

3#A949ED

4#B563F0

5#C17DF2

6#CE97F5

7#DAB1F7

8#E6CBFA

9#F3E5FC

Tones

Muted variations

1#7E1DC3

2#7C27BA

3#7B30B1

4#7939A7

5#78429E

6#764B95

7#75558C

8#735E83

9#726779

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F8F1 `#F8F1FE`	BackgroundsSubtle highlightsCard backgrounds
100	F0DF `#F0DFFC`	Light backgroundsTable row hoverSkeleton loading
200	E2C3 `#E2C3F9`	Secondary backgroundsInput backgroundsDividers
300	CC94 `#CC94F4`	BordersInactive statesPlaceholder text
400	B25D `#B25DEF`	Disabled statesSecondary iconsMuted text
500	9C2E `#9C2EEA`	Primary brand colorCTAsActive elementsLinks
600	8014 `#8014CC`	Hover statesFocus ringsPrimary buttons hover
700	6510 `#6510A2`	Active/pressed statesDark mode accentsSecondary text
800	480B `#480B74`	Text on light backgroundsHeadingsStrong borders
900	2E07 `#2E074A`	Primary textHigh emphasis contentDark headings
950	1D05 `#1D052E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F8F1FE;
  --purple-100: #F0DFFC;
  --purple-200: #E2C3F9;
  --purple-300: #CC94F4;
  --purple-400: #B25DEF;
  --purple-500: #9C2EEA;
  --purple-600: #8014CC;
  --purple-700: #6510A2;
  --purple-800: #480B74;
  --purple-900: #2E074A;
  --purple-950: #1D052E;
}

Generate More Shades Create Palette Convert Color