Colors Palettes
All palettes

Purple color Palette

best purple color palette for web design ,app ui and graphic design

Web Design 5 colors
#CD91E8
#BF73E2
#A951D2
#9B36C9
#720BA2

Every color in Purple color Palette

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

24 21
#CD91E8
Primary
#CD91E8 rgb(205, 145, 232) hsl(281, 65%, 74%)
On white 2.38:1 Fails On black 8.81:1 AAA
#BF73E2
Secondary
#BF73E2 rgb(191, 115, 226) hsl(281, 66%, 67%)
On white 3.10:1 AA large text On black 6.77:1 AA
#A951D2
Accent
#A951D2 rgb(169, 81, 210) hsl(281, 59%, 57%)
On white 4.38:1 AA large text On black 4.79:1 AA
#9B36C9
Background
#9B36C9 rgb(155, 54, 201) hsl(281, 58%, 50%)
On white 5.58:1 AA On black 3.76:1 AA large text
#720BA2
Text
#720BA2 rgb(114, 11, 162) hsl(281, 87%, 34%)
On white 9.19:1 AAA On black 2.29:1 Fails

About the Purple color Palette palette

Purple color Palette has 5 colors in the Web Design category. Overall it reads as mid-tone and vivid, with an average lightness of 56% and an average saturation of 67%. The hues lean cool.

The strongest text and background pair is #CD91E8 with #720BA2, at a contrast ratio of 3.86: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
67%
Lightness
56%
Best contrast
3.9

Ideas for using it

  • Web design: use #CD91E8 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: #CD91E8; /* Primary */
  --color-2: #BF73E2; /* Secondary */
  --color-3: #A951D2; /* Accent */
  --color-4: #9B36C9; /* Background */
  --color-5: #720BA2; /* Text */
}