Purple

#7F09AA

Purple

Color Codes

All color formats for development

HEX

#7F09AA

RGB

rgb(127, 9, 170)

HSL

hsl(284, 90%, 35%)

OKLCH

oklch(0.454 0.221 313)

CMYK

cmyk(25%, 95%, 0%, 33%)

Accessibility

WCAG contrast compliance

On White Background

8.33:1

AA ✓AAA ✓

On Black Background

2.52:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FBF0

100

#F5DD

200

#ECC0

300

#DD90

400

#CB55

500

#BC25

600

#9F0B

700

#7F09

800

#5B06

900

#3A04

950

#2403

Shades

Darker variations

1#720899

2#650788

3#590677

4#4C0566

5#3F0455

6#330444

7#260333

8#190222

9#0D0111

Tints

Lighter variations

1#960BC9

2#AE0CE9

3#BC23F3

4#C542F5

5#CF62F7

6#D981F8

7#E2A1FA

8#ECC0FC

9#F5E0FD

Tones

Muted variations

1#7B11A2

2#77199A

3#732191

4#702989

5#6C3181

6#683979

7#644171

8#614969

9#5D5161

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FBF0 `#FBF0FE`	BackgroundsSubtle highlightsCard backgrounds
100	F5DD `#F5DDFD`	Light backgroundsTable row hoverSkeleton loading
200	ECC0 `#ECC0FC`	Secondary backgroundsInput backgroundsDividers
300	DD90 `#DD90F9`	BordersInactive statesPlaceholder text
400	CB55 `#CB55F6`	Disabled statesSecondary iconsMuted text
500	BC25 `#BC25F4`	Primary brand colorCTAsActive elementsLinks
600	9F0B `#9F0BD5`	Hover statesFocus ringsPrimary buttons hover
700	7F09 `#7F09AA`	Active/pressed statesDark mode accentsSecondary text
800	5B06 `#5B0679`	Text on light backgroundsHeadingsStrong borders
900	3A04 `#3A044E`	Primary textHigh emphasis contentDark headings
950	2403 `#240330`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF0FE;
  --purple-100: #F5DDFD;
  --purple-200: #ECC0FC;
  --purple-300: #DD90F9;
  --purple-400: #CB55F6;
  --purple-500: #BC25F4;
  --purple-600: #9F0BD5;
  --purple-700: #7F09AA;
  --purple-800: #5B0679;
  --purple-900: #3A044E;
  --purple-950: #240330;
}

Generate More Shades Create Palette Convert Color