Purple

#7003B0

Purple

Color Codes

All color formats for development

HEX

#7003B0

RGB

rgb(112, 3, 176)

HSL

hsl(278, 97%, 35%)

OKLCH

oklch(0.436 0.224 305.3)

CMYK

cmyk(36%, 98%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

9.02:1

AA ✓AAA ✓

On Black Background

2.33:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F0

100

#F2DC

200

#E6BE

300

#D48B

400

#BD4F

500

#AA1D

600

#8D03

700

#7003

800

#5002

900

#3301

950

#2001

Shades

Darker variations

1#65029E

2#5A028D

3#4F027B

4#430269

5#380158

6#2D0146

7#220135

8#160123

9#0B0012

Tints

Lighter variations

1#8503D0

2#9A04F1

3#A91AFC

4#B53BFC

5#C25CFD

6#CE7CFD

7#DA9DFE

8#E6BEFE

9#F3DEFF

Tones

Muted variations

1#6E0BA7

2#6C149F

3#691D96

4#67258D

5#652E85

6#62377C

7#603F73

8#5E486B

9#5C5162

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F0 `#F9F0FF`	BackgroundsSubtle highlightsCard backgrounds
100	F2DC `#F2DCFE`	Light backgroundsTable row hoverSkeleton loading
200	E6BE `#E6BEFE`	Secondary backgroundsInput backgroundsDividers
300	D48B `#D48BFD`	BordersInactive statesPlaceholder text
400	BD4F `#BD4FFC`	Disabled statesSecondary iconsMuted text
500	AA1D `#AA1DFC`	Primary brand colorCTAsActive elementsLinks
600	8D03 `#8D03DD`	Hover statesFocus ringsPrimary buttons hover
700	7003 `#7003B0`	Active/pressed statesDark mode accentsSecondary text
800	5002 `#50027E`	Text on light backgroundsHeadingsStrong borders
900	3301 `#330150`	Primary textHigh emphasis contentDark headings
950	2001 `#200132`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F0FF;
  --purple-100: #F2DCFE;
  --purple-200: #E6BEFE;
  --purple-300: #D48BFD;
  --purple-400: #BD4FFC;
  --purple-500: #AA1DFC;
  --purple-600: #8D03DD;
  --purple-700: #7003B0;
  --purple-800: #50027E;
  --purple-900: #330150;
  --purple-950: #200132;
}

Generate More Shades Create Palette Convert Color