Purple

#840CD4

Purple

Color Codes

All color formats for development

HEX

#840CD4

RGB

rgb(132, 12, 212)

HSL

hsl(276, 89%, 44%)

OKLCH

oklch(0.498 0.255 303.7)

CMYK

cmyk(38%, 94%, 0%, 17%)

Accessibility

WCAG contrast compliance

On White Background

7.04:1

AA ✓AAA ✓

On Black Background

2.98:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F1

100

#F0DD

200

#E4C0

300

#CF90

400

#B656

500

#A126

600

#840C

700

#690A

800

#4B07

900

#3004

950

#1E03

Shades

Darker variations

1#770BBF

2#6A0AAA

3#5D0994

4#4F077F

5#42066A

6#350555

7#280440

8#1A022A

9#0D0115

Tints

Lighter variations

1#950EEF

2#A127F2

3#AD42F4

4#B95DF6

5#C478F7

6#D093F9

7#DCAEFA

8#E8C9FC

9#F3E4FD

Tones

Muted variations

1#8216CA

2#8020C0

3#7E2AB6

4#7C34AC

5#7A3EA2

6#784898

7#76528E

8#745C84

9#72667A

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F1 `#F9F1FE`	BackgroundsSubtle highlightsCard backgrounds
100	F0DD `#F0DDFD`	Light backgroundsTable row hoverSkeleton loading
200	E4C0 `#E4C0FB`	Secondary backgroundsInput backgroundsDividers
300	CF90 `#CF90F9`	BordersInactive statesPlaceholder text
400	B656 `#B656F5`	Disabled statesSecondary iconsMuted text
500	A126 `#A126F2`	Primary brand colorCTAsActive elementsLinks
600	840C `#840CD4`	Hover statesFocus ringsPrimary buttons hover
700	690A `#690AA9`	Active/pressed statesDark mode accentsSecondary text
800	4B07 `#4B0778`	Text on light backgroundsHeadingsStrong borders
900	3004 `#30044D`	Primary textHigh emphasis contentDark headings
950	1E03 `#1E0330`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F1FE;
  --purple-100: #F0DDFD;
  --purple-200: #E4C0FB;
  --purple-300: #CF90F9;
  --purple-400: #B656F5;
  --purple-500: #A126F2;
  --purple-600: #840CD4;
  --purple-700: #690AA9;
  --purple-800: #4B0778;
  --purple-900: #30044D;
  --purple-950: #1E0330;
}

Generate More Shades Create Palette Convert Color