Purple

#6B189A

Purple

Color Codes

All color formats for development

HEX

#6B189A

RGB

rgb(107, 24, 154)

HSL

hsl(278, 73%, 35%)

OKLCH

oklch(0.419 0.193 308.7)

CMYK

cmyk(31%, 84%, 0%, 40%)

Accessibility

WCAG contrast compliance

On White Background

9.45:1

AA ✓AAA ✓

On Black Background

2.22:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F2

100

#F1E0

200

#E4C6

300

#D09A

400

#B765

500

#A338

600

#861E

700

#6B18

800

#4C11

900

#310B

950

#1E07

Shades

Darker variations

1#60168B

2#55137C

3#4B116C

4#400E5D

5#350C4D

6#2B0A3E

7#20072E

8#15051F

9#0B020F

Tints

Lighter variations

1#7E1DB7

2#9221D4

3#A236E0

4#AF53E4

5#BC70E9

6#CA8CED

7#D7A9F2

8#E4C6F6

9#F2E2FB

Tones

Muted variations

1#691F94

2#67258D

3#652C87

4#643280

5#62397A

6#603F73

7#5E466D

8#5D4C66

9#5B5360

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F2 `#F9F2FD`	BackgroundsSubtle highlightsCard backgrounds
100	F1E0 `#F1E0FA`	Light backgroundsTable row hoverSkeleton loading
200	E4C6 `#E4C6F6`	Secondary backgroundsInput backgroundsDividers
300	D09A `#D09AEF`	BordersInactive statesPlaceholder text
400	B765 `#B765E7`	Disabled statesSecondary iconsMuted text
500	A338 `#A338E0`	Primary brand colorCTAsActive elementsLinks
600	861E `#861EC2`	Hover statesFocus ringsPrimary buttons hover
700	6B18 `#6B189A`	Active/pressed statesDark mode accentsSecondary text
800	4C11 `#4C116E`	Text on light backgroundsHeadingsStrong borders
900	310B `#310B47`	Primary textHigh emphasis contentDark headings
950	1E07 `#1E072C`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F2FD;
  --purple-100: #F1E0FA;
  --purple-200: #E4C6F6;
  --purple-300: #D09AEF;
  --purple-400: #B765E7;
  --purple-500: #A338E0;
  --purple-600: #861EC2;
  --purple-700: #6B189A;
  --purple-800: #4C116E;
  --purple-900: #310B47;
  --purple-950: #1E072C;
}

Generate More Shades Create Palette Convert Color