Purple

#6C08AA

Purple

Color Codes

All color formats for development

HEX

#6C08AA

RGB

rgb(108, 8, 170)

HSL

hsl(277, 91%, 35%)

OKLCH

oklch(0.427 0.216 305.1)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

9.32:1

AA ✓AAA ✓

On Black Background

2.25:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F0

100

#F1DD

200

#E5C0

300

#D18F

400

#B955

500

#A524

600

#880A

700

#6C08

800

#4D06

900

#3104

950

#1F02

Shades

Darker variations

1#610799

2#570688

3#4C0677

4#410566

5#360455

6#2B0344

7#200233

8#160222

9#0B0111

Tints

Lighter variations

1#800ACA

2#940BEA

3#A421F5

4#B141F6

5#BE61F8

6#CB80F9

7#D8A0FB

8#E5C0FC

9#F2DFFE

Tones

Muted variations

1#6A10A2

2#68189A

3#672092

4#65298A

5#633182

6#61397A

7#5F4172

8#5D4969

9#5B5161

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F0 `#F9F0FE`	BackgroundsSubtle highlightsCard backgrounds
100	F1DD `#F1DDFD`	Light backgroundsTable row hoverSkeleton loading
200	E5C0 `#E5C0FC`	Secondary backgroundsInput backgroundsDividers
300	D18F `#D18FFA`	BordersInactive statesPlaceholder text
400	B955 `#B955F7`	Disabled statesSecondary iconsMuted text
500	A524 `#A524F5`	Primary brand colorCTAsActive elementsLinks
600	880A `#880AD6`	Hover statesFocus ringsPrimary buttons hover
700	6C08 `#6C08AA`	Active/pressed statesDark mode accentsSecondary text
800	4D06 `#4D067A`	Text on light backgroundsHeadingsStrong borders
900	3104 `#31044E`	Primary textHigh emphasis contentDark headings
950	1F02 `#1F0231`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F0FE;
  --purple-100: #F1DDFD;
  --purple-200: #E5C0FC;
  --purple-300: #D18FFA;
  --purple-400: #B955F7;
  --purple-500: #A524F5;
  --purple-600: #880AD6;
  --purple-700: #6C08AA;
  --purple-800: #4D067A;
  --purple-900: #31044E;
  --purple-950: #1F0231;
}

Generate More Shades Create Palette Convert Color