css-theme-color-gen
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v51View latest version
An easy CSS theme color variable generator using query parameters as configuration.
Try tweaking the query parameters here and see the generated output: https://www.css-theme-color-gen.val.run?name=primary-theme-color&hsl=20deg,40pct,40pct&output-color-space=rgb
Do not use spaces, percentage signs (%), or octothropes (#) in the URL unless you know what you are doing.
| Name | Value Format | Docs |
|---|---|---|
| name | <any words> | The base name of the CSS variables being generated: --{name}-50, --{name}-100, ... |
| hsl | <0-360>(deg)?,<0-100>(percent|pct)?,<0-100>(percent|pct)? | WARNING: DO NOT USE THE LITERAL PERCENT SIGN (%) TO ANNOTATE THE SATURATION OR LIGHTNESS; ONLY USE THE WORDS percent OR pct.A hue-saturation-lightness color modeled after the CSS function hsl(). |
| rgb | <0-255>,<0-255>,<0-255> | A red-green-blue color. |
| color | WARNING: DO NOT USE THE OCTOTHROPE # FOR HEX NUMBERS; JUST TYPE THE HEX NUMBER BY ITSELFA color that is auto-detected by chroma.js. CSS color keywords and hexadecimal RGB work here. | |
| style | tailwind|luminance-range | The luminance indicator in the variable name, e.g. Tailwind CSS's --x-50,--x-100,--x-200, etc.tailwind - replicates Tailwind CSS's variable naming convention (50, 100, 200, ...900, 950)luminance-range - generates numbers from 0 to the "luminance-range-size" specified, which is mapped from 0 to 100% luminance. For example, if luminance-range-size was 20, then --x-0, --x-1, ...--x-20 are generated, and each number corresponds to 5% luminance. |
| luminance-range-size | <1-100> | The maximum amount of luminance values generated. |
| output-color-space | ||
| hsl |
Can
rgb,
color: colorString,
"alphas-generated": alphasGenerated = "10",
name,
style = "tailwind",
"luminance-range-size": luminanceRangeSize = "100",
"output-color-space": outputColorSpace = "oklab",