Purple

#731BC5

Purple

Color Codes

All color formats for development

HEX

#731BC5

RGB

rgb(115, 27, 197)

HSL

hsl(271, 76%, 44%)

OKLCH

oklch(0.469 0.232 300.1)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

7.80:1

AA ✓AAA ✓

On Black Background

2.69:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F8F2

100

#EEE0

200

#DFC5

300

#C698

400

#A862

500

#8F35

600

#731B

700

#5C15

800

#410F

900

#2A0A

950

#1A06

Shades

Darker variations

1#6818B2

2#5C169E

3#51138A

4#451076

5#3A0D63

6#2E0B4F

7#23083B

8#170527

9#0C0314

Tints

Lighter variations

1#821EDF

2#9036E4

3#9E4FE7

4#AB68EA

5#B981EE

6#C79AF1

7#D5B4F5

8#E3CDF8

9#F1E6FC

Tones

Muted variations

1#7323BD

2#722CB4

3#7235AC

4#723DA3

5#72469B

6#714E92

7#71578A

8#715F81

9#706879

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F8F2 `#F8F2FD`	BackgroundsSubtle highlightsCard backgrounds
100	EEE0 `#EEE0FB`	Light backgroundsTable row hoverSkeleton loading
200	DFC5 `#DFC5F7`	Secondary backgroundsInput backgroundsDividers
300	C698 `#C698F1`	BordersInactive statesPlaceholder text
400	A862 `#A862EA`	Disabled statesSecondary iconsMuted text
500	8F35 `#8F35E3`	Primary brand colorCTAsActive elementsLinks
600	731B `#731BC5`	Hover statesFocus ringsPrimary buttons hover
700	5C15 `#5C159D`	Active/pressed statesDark mode accentsSecondary text
800	410F `#410F70`	Text on light backgroundsHeadingsStrong borders
900	2A0A `#2A0A48`	Primary textHigh emphasis contentDark headings
950	1A06 `#1A062D`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F8F2FD;
  --purple-100: #EEE0FB;
  --purple-200: #DFC5F7;
  --purple-300: #C698F1;
  --purple-400: #A862EA;
  --purple-500: #8F35E3;
  --purple-600: #731BC5;
  --purple-700: #5C159D;
  --purple-800: #410F70;
  --purple-900: #2A0A48;
  --purple-950: #1A062D;
}

Generate More Shades Create Palette Convert Color