Purple

#7C1BC5

Purple

Color Codes

All color formats for development

HEX

#7C1BC5

RGB

rgb(124, 27, 197)

HSL

hsl(274, 76%, 44%)

OKLCH

oklch(0.481 0.233 303.7)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

7.45:1

AA ✓AAA ✓

On Black Background

2.82:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F8F2

100

#EFE0

200

#E1C5

300

#CA98

400

#AF62

500

#9835

600

#7C1B

700

#6215

800

#460F

900

#2D0A

950

#1C06

Shades

Darker variations

1#6F18B2

2#63169E

3#56138A

4#4A1076

5#3E0D63

6#310B4F

7#25083B

8#190527

9#0C0314

Tints

Lighter variations

1#8B1EDF

2#9836E4

3#A54FE7

4#B268EA

5#BF81EE

6#CC9AF1

7#D9B4F5

8#E5CDF8

9#F2E6FC

Tones

Muted variations

1#7A23BD

2#792CB4

3#7835AC

4#773DA3

5#76469B

6#754E92

7#74578A

8#725F81

9#716879

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F8F2 `#F8F2FD`	BackgroundsSubtle highlightsCard backgrounds
100	EFE0 `#EFE0FB`	Light backgroundsTable row hoverSkeleton loading
200	E1C5 `#E1C5F7`	Secondary backgroundsInput backgroundsDividers
300	CA98 `#CA98F1`	BordersInactive statesPlaceholder text
400	AF62 `#AF62EA`	Disabled statesSecondary iconsMuted text
500	9835 `#9835E3`	Primary brand colorCTAsActive elementsLinks
600	7C1B `#7C1BC5`	Hover statesFocus ringsPrimary buttons hover
700	6215 `#62159D`	Active/pressed statesDark mode accentsSecondary text
800	460F `#460F70`	Text on light backgroundsHeadingsStrong borders
900	2D0A `#2D0A48`	Primary textHigh emphasis contentDark headings
950	1C06 `#1C062D`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F8F2FD;
  --purple-100: #EFE0FB;
  --purple-200: #E1C5F7;
  --purple-300: #CA98F1;
  --purple-400: #AF62EA;
  --purple-500: #9835E3;
  --purple-600: #7C1BC5;
  --purple-700: #62159D;
  --purple-800: #460F70;
  --purple-900: #2D0A48;
  --purple-950: #1C062D;
}

Generate More Shades Create Palette Convert Color