Purple

#8A1BC5

Purple

Color Codes

All color formats for development

HEX

#8A1BC5

RGB

rgb(138, 27, 197)

HSL

hsl(279, 76%, 44%)

OKLCH

oklch(0.499 0.236 309.1)

CMYK

cmyk(30%, 86%, 0%, 23%)

Accessibility

WCAG contrast compliance

On White Background

6.90:1

AA ✓AAA ✗

On Black Background

3.04:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F2

100

#F1E0

200

#E5C5

300

#D298

400

#BA62

500

#A635

600

#8A1B

700

#6E15

800

#4E0F

900

#320A

950

#1F06

Shades

Darker variations

1#7C18B2

2#6E169E

3#60138A

4#531076

5#450D63

6#370B4F

7#29083B

8#1C0527

9#0E0314

Tints

Lighter variations

1#9B1EDF

2#A736E4

3#B24FE7

4#BD68EA

5#C881EE

6#D39AF1

7#DEB4F5

8#E9CDF8

9#F4E6FC

Tones

Muted variations

1#8723BD

2#852CB4

3#8235AC

4#803DA3

5#7D469B

6#7A4E92

7#78578A

8#755F81

9#736879

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F2 `#F9F2FD`	BackgroundsSubtle highlightsCard backgrounds
100	F1E0 `#F1E0FB`	Light backgroundsTable row hoverSkeleton loading
200	E5C5 `#E5C5F7`	Secondary backgroundsInput backgroundsDividers
300	D298 `#D298F1`	BordersInactive statesPlaceholder text
400	BA62 `#BA62EA`	Disabled statesSecondary iconsMuted text
500	A635 `#A635E3`	Primary brand colorCTAsActive elementsLinks
600	8A1B `#8A1BC5`	Hover statesFocus ringsPrimary buttons hover
700	6E15 `#6E159D`	Active/pressed statesDark mode accentsSecondary text
800	4E0F `#4E0F70`	Text on light backgroundsHeadingsStrong borders
900	320A `#320A48`	Primary textHigh emphasis contentDark headings
950	1F06 `#1F062D`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F2FD;
  --purple-100: #F1E0FB;
  --purple-200: #E5C5F7;
  --purple-300: #D298F1;
  --purple-400: #BA62EA;
  --purple-500: #A635E3;
  --purple-600: #8A1BC5;
  --purple-700: #6E159D;
  --purple-800: #4E0F70;
  --purple-900: #320A48;
  --purple-950: #1F062D;
}

Generate More Shades Create Palette Convert Color