Colors Palettes
All palettes

Violet

Beautiful Violet color palette.

Web Design 5 colors
#C384F7
#9E86F8
#846CF8
#7F44DB
#4F34BB

Every color in Violet

HEX, RGB and HSL codes with contrast ratings. Click to copy.

51 35
#C384F7
Primary
#C384F7 rgb(195, 132, 247) hsl(273, 88%, 74%)
On white 2.64:1 Fails On black 7.96:1 AAA
#9E86F8
Secondary
#9E86F8 rgb(158, 134, 248) hsl(253, 89%, 75%)
On white 2.91:1 Fails On black 7.22:1 AAA
#846CF8
Accent
#846CF8 rgb(132, 108, 248) hsl(250, 91%, 70%)
On white 3.83:1 AA large text On black 5.48:1 AA
#7F44DB
Background
#7F44DB rgb(127, 68, 219) hsl(263, 68%, 56%)
On white 5.60:1 AA On black 3.75:1 AA large text
#4F34BB
Text
#4F34BB rgb(79, 52, 187) hsl(252, 56%, 47%)
On white 8.26:1 AAA On black 2.54:1 Fails

About the Violet palette

Violet has 5 colors in the Web Design category. Overall it reads as mid-tone and vivid, with an average lightness of 64% and an average saturation of 78%. The hues lean cool.

The strongest text and background pair is #C384F7 with #4F34BB, at a contrast ratio of 3.13:1 (AA large text). No pair in this palette reaches 4.5:1, so add a very dark or very light neutral before you set body text with it.

Color harmony

Measured from this palette's real values.

Saturation
78%
Lightness
64%
Best contrast
3.1

Ideas for using it

  • Web design: use #C384F7 for buttons and links, and keep large areas to the lighter colors.
  • Mobile apps: check each color against white and black above before you use it for text or icons.
  • Brand identity: pick one or two colors as the core and keep the rest as support.
  • Presentations: use the mid-tone colors for backgrounds and the strongest contrast pair for titles.

Use it in your project

Copy this palette as CSS variables, or export it in another format.

:root {
  --color-1: #C384F7; /* Primary */
  --color-2: #9E86F8; /* Secondary */
  --color-3: #846CF8; /* Accent */
  --color-4: #7F44DB; /* Background */
  --color-5: #4F34BB; /* Text */
}