Color Palette Shade Generator

Variable outputs are easily copied via provided buttons
- CSS variables: --color-blue-500: hsla(240, 80%, 50%, 1);
- SASS/SCSS variables: $color-blue-500: hsl(240, 80%, 50%);
- Tailwind/WindiCSS config (tailwind.config.js) variables with optional reference the CSS variables
Customizable options:
- Variable name, default: name based on hue --color-varname
  Show Shades to set custom varname
- Variable name prefix, default: --color-varname
- %L shift per step, default: 7.5%; dark/light: %L/3 (7.5%/3=2.5%)
- %S shift per step, default: 0%
- Number of steps, default: 10
- Sass/SCSS style variables, default: 0
Chosen color, scheme and customized options are stored in the query string (url.searchParams) for a sharable link.
- H=Hue
- S=Saturation
- L=Lightness
- A=Alpha
- scheme=scheme index
- steps=number of steps
- pL=%L per step
- pS=%S per step
- pre=variable prefix
- cn=color notation
- tw=tailwind variable option
- sass=SCSS/SASS variable option
- c[0-3]=custom color names
HSLA based, produces your chosen color notations for web:
- HSLA: Hue Saturation Lightness Alpha - hsla(240, 75%, 50%, 0.9)
- RGBA: Red Green Blue Alpha - rgba(32, 32, 223, 0.9)
- #HexA: Hexadecimal with Alpha - #2020dfe6
- HSL: Hue Saturation Lightness - hsl(240, 75%, 50%)
- RGB: Red Green Blue - rgb(32, 32, 223)
- #Hex: Hexadecimal - #2020df