Purple

#B300B3

Pink

Color Codes

All color formats for development

HEX

#B300B3

RGB

rgb(179, 0, 179)

HSL

hsl(300, 100%, 35%)

OKLCH

oklch(0.538 0.247 328.4)

CMYK

cmyk(0%, 100%, 0%, 30%)

Accessibility

WCAG contrast compliance

On White Background

5.89:1

AA ✓AAA ✗

On Black Background

3.57:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FFF0

100

#FFDB

200

#FFBD

300

#FF8A

400

#FF4D

500

#FF1A

600

#E000

700

#B300

800

#8000

900

#5200

950

#3300

Shades

Darker variations

1#A100A1

2#8F008F

3#7D007D

4#6B006B

5#590059

6#470047

7#360036

8#240024

9#120012

Tints

Lighter variations

1#D400D4

2#F500F5

3#FF17FF

4#FF38FF

5#FF59FF

6#FF7AFF

7#FF9CFF

8#FFBDFF

9#FFDEFF

Tones

Muted variations

1#AA09AA

2#A112A1

3#981B98

4#8F248F

5#862D86

6#7D367D

7#743E74

8#6B476B

9#625062

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FFF0 `#FFF0FF`	BackgroundsSubtle highlightsCard backgrounds
100	FFDB `#FFDBFF`	Light backgroundsTable row hoverSkeleton loading
200	FFBD `#FFBDFF`	Secondary backgroundsInput backgroundsDividers
300	FF8A `#FF8AFF`	BordersInactive statesPlaceholder text
400	FF4D `#FF4DFF`	Disabled statesSecondary iconsMuted text
500	FF1A `#FF1AFF`	Primary brand colorCTAsActive elementsLinks
600	E000 `#E000E0`	Hover statesFocus ringsPrimary buttons hover
700	B300 `#B300B3`	Active/pressed statesDark mode accentsSecondary text
800	8000 `#800080`	Text on light backgroundsHeadingsStrong borders
900	5200 `#520052`	Primary textHigh emphasis contentDark headings
950	3300 `#330033`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FFF0FF;
  --purple-100: #FFDBFF;
  --purple-200: #FFBDFF;
  --purple-300: #FF8AFF;
  --purple-400: #FF4DFF;
  --purple-500: #FF1AFF;
  --purple-600: #E000E0;
  --purple-700: #B300B3;
  --purple-800: #800080;
  --purple-900: #520052;
  --purple-950: #330033;
}

Generate More Shades Create Palette Convert Color