Purple

#7618C9

Purple

Color Codes

All color formats for development

HEX

#7618C9

RGB

rgb(118, 24, 201)

HSL

hsl(272, 79%, 44%)

OKLCH

oklch(0.475 0.238 300.5)

CMYK

cmyk(41%, 88%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

7.65:1

AA ✓AAA ✓

On Black Background

2.74:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F8F1

100

#EEDF

200

#E0C4

300

#C796

400

#AA5F

500

#9232

600

#7618

700

#5E13

800

#430D

900

#2B09

950

#1B05

Shades

Darker variations

1#6A15B5

2#5E13A1

3#53108D

4#470E79

5#3B0C64

6#2F0950

7#23073C

8#180528

9#0C0214

Tints

Lighter variations

1#851BE2

2#9333E7

3#A04CEA

4#AE66ED

5#BB7FF0

6#C999F3

7#D6B2F6

8#E4CCF9

9#F1E5FC

Tones

Muted variations

1#7620C0

2#7529B7

3#7432AE

4#743BA5

5#73449D

6#734D94

7#72568B

8#715E82

9#716779

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F8F1 `#F8F1FD`	BackgroundsSubtle highlightsCard backgrounds
100	EEDF `#EEDFFB`	Light backgroundsTable row hoverSkeleton loading
200	E0C4 `#E0C4F8`	Secondary backgroundsInput backgroundsDividers
300	C796 `#C796F3`	BordersInactive statesPlaceholder text
400	AA5F `#AA5FEC`	Disabled statesSecondary iconsMuted text
500	9232 `#9232E7`	Primary brand colorCTAsActive elementsLinks
600	7618 `#7618C9`	Hover statesFocus ringsPrimary buttons hover
700	5E13 `#5E13A0`	Active/pressed statesDark mode accentsSecondary text
800	430D `#430D72`	Text on light backgroundsHeadingsStrong borders
900	2B09 `#2B0949`	Primary textHigh emphasis contentDark headings
950	1B05 `#1B052E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F8F1FD;
  --purple-100: #EEDFFB;
  --purple-200: #E0C4F8;
  --purple-300: #C796F3;
  --purple-400: #AA5FEC;
  --purple-500: #9232E7;
  --purple-600: #7618C9;
  --purple-700: #5E13A0;
  --purple-800: #430D72;
  --purple-900: #2B0949;
  --purple-950: #1B052E;
}

Generate More Shades Create Palette Convert Color