Color Range Generator
Generate a complete alpha and brightness range from a single color. Tweak format, name your color, and copy the full CSS variable set — all right in your browser.
Select color
Brightness Range
color-1000hsla(0, 0%, 100%, 1.00)
color-900hsla(266, 75%, 89%, 1.00)
color-800hsla(266, 73%, 78%, 1.00)
color-700hsla(266, 74%, 67%, 1.00)
color-600hsla(266, 74%, 56%, 1.00)
color-500hsla(266, 74%, 45%, 1.00)
color-400hsla(266, 74%, 36%, 1.00)
color-300hsla(266, 74%, 27%, 1.00)
color-200hsla(266, 74%, 18%, 1.00)
color-100hsla(266, 74%, 9%, 1.00)
color-0hsla(0, 0%, 0%, 1.00)
Alpha Range
color-alpha-100hsla(266, 74%, 45%, 1.00)
color-alpha-90hsla(266, 74%, 45%, 0.90)
color-alpha-80hsla(266, 74%, 45%, 0.80)
color-alpha-70hsla(266, 74%, 45%, 0.70)
color-alpha-60hsla(266, 74%, 45%, 0.60)
color-alpha-50hsla(266, 74%, 45%, 0.50)
color-alpha-40hsla(266, 74%, 45%, 0.40)
color-alpha-30hsla(266, 74%, 45%, 0.30)
color-alpha-20hsla(266, 74%, 45%, 0.20)
color-alpha-10hsla(266, 74%, 45%, 0.10)
color-alpha-0hsla(266, 74%, 45%, 0.00)