Purple

#791BC5

Purple

Color Codes

All color formats for development

HEX

#791BC5

RGB

rgb(121, 27, 197)

HSL

hsl(273, 76%, 44%)

OKLCH

oklch(0.477 0.233 302.5)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

7.56:1

AA ✓AAA ✓

On Black Background

2.78:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F8F2

100

#EFE0

200

#E0C5

300

#C998

400

#AD62

500

#9535

600

#791B

700

#6015

800

#450F

900

#2C0A

950

#1B06

Shades

Darker variations

1#6D18B2

2#61169E

3#55138A

4#481076

5#3C0D63

6#300B4F

7#24083B

8#180527

9#0C0314

Tints

Lighter variations

1#881EDF

2#9536E4

3#A34FE7

4#B068EA

5#BD81EE

6#CA9AF1

7#D7B4F5

8#E5CDF8

9#F2E6FC

Tones

Muted variations

1#7823BD

2#772CB4

3#7635AC

4#753DA3

5#74469B

6#744E92

7#73578A

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	E0C5 `#E0C5F7`	Secondary backgroundsInput backgroundsDividers
300	C998 `#C998F1`	BordersInactive statesPlaceholder text
400	AD62 `#AD62EA`	Disabled statesSecondary iconsMuted text
500	9535 `#9535E3`	Primary brand colorCTAsActive elementsLinks
600	791B `#791BC5`	Hover statesFocus ringsPrimary buttons hover
700	6015 `#60159D`	Active/pressed statesDark mode accentsSecondary text
800	450F `#450F70`	Text on light backgroundsHeadingsStrong borders
900	2C0A `#2C0A48`	Primary textHigh emphasis contentDark headings
950	1B06 `#1B062D`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F8F2FD;
  --purple-100: #EFE0FB;
  --purple-200: #E0C5F7;
  --purple-300: #C998F1;
  --purple-400: #AD62EA;
  --purple-500: #9535E3;
  --purple-600: #791BC5;
  --purple-700: #60159D;
  --purple-800: #450F70;
  --purple-900: #2C0A48;
  --purple-950: #1B062D;
}

Generate More Shades Create Palette Convert Color