Purple

#7603B0

Purple

Color Codes

All color formats for development

HEX

#7603B0

RGB

rgb(118, 3, 176)

HSL

hsl(280, 97%, 35%)

OKLCH

oklch(0.444 0.225 307.8)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

8.71:1

AA ✓AAA ✓

On Black Background

2.41:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FAF0

100

#F3DC

200

#E9BE

300

#D78B

400

#C34F

500

#B11D

600

#9403

700

#7603

800

#5402

900

#3601

950

#2201

Shades

Darker variations

1#6A029E

2#5E028D

3#53027B

4#470269

5#3B0158

6#2F0146

7#230135

8#180123

9#0C0012

Tints

Lighter variations

1#8C03D0

2#A204F1

3#B01AFC

4#BC3BFC

5#C75CFD

6#D27CFD

7#DD9DFE

8#E9BEFE

9#F4DEFF

Tones

Muted variations

1#730BA7

2#70149F

3#6D1D96

4#6B258D

5#682E85

6#65377C

7#623F73

8#5F486B

9#5C5162

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FAF0 `#FAF0FF`	BackgroundsSubtle highlightsCard backgrounds
100	F3DC `#F3DCFE`	Light backgroundsTable row hoverSkeleton loading
200	E9BE `#E9BEFE`	Secondary backgroundsInput backgroundsDividers
300	D78B `#D78BFD`	BordersInactive statesPlaceholder text
400	C34F `#C34FFC`	Disabled statesSecondary iconsMuted text
500	B11D `#B11DFC`	Primary brand colorCTAsActive elementsLinks
600	9403 `#9403DD`	Hover statesFocus ringsPrimary buttons hover
700	7603 `#7603B0`	Active/pressed statesDark mode accentsSecondary text
800	5402 `#54027E`	Text on light backgroundsHeadingsStrong borders
900	3601 `#360150`	Primary textHigh emphasis contentDark headings
950	2201 `#220132`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FAF0FF;
  --purple-100: #F3DCFE;
  --purple-200: #E9BEFE;
  --purple-300: #D78BFD;
  --purple-400: #C34FFC;
  --purple-500: #B11DFC;
  --purple-600: #9403DD;
  --purple-700: #7603B0;
  --purple-800: #54027E;
  --purple-900: #360150;
  --purple-950: #220132;
}

Generate More Shades Create Palette Convert Color