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: v55View 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://css-theme-color-gen.val.run?name=primary-theme-color&hsl=20deg,40pct,40pct&output-color-space=rgb&alphas-generated=5
import "https://css-theme-color-gen.val.run?name=primary-theme-color&hsl=20deg,40pct,40pct&output-color-space=rgb&alphas-generated=5"
Do not use spaces, percentage signs (%), or octothropes (#) in the URL unless you know what you are doing.
| Name | Value Format | Docs |
|---|---|---|
| name | <any word(s)> | The base name of the CSS variables being generated: --{name}-50, --{name}-100, .... It is reccomended to keep this kebab case (this-is-kebab-case), which is the standard for CSS variables. |
| 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. Defaults to 100. |
| alphas-generated | <0-100> | The amount of alpha(opacity) values to generate additionally for each color. The alpha indicator on the CSS variable is a number ranging from 0 to this number behind the luminance indicator (--x-50-2 has 2 as the alpha), and it will be mapped to range from 0% to 100% (e.g. if alphas-generated was 20, each number corresponds to 5% alpha). Set this to 0 to disable. Defaults to 10. |
| output-color-space | rgb|hsl|lab|lch|oklab|oklch | The color function that is used in the generated CSS. Defaults to oklab |