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.
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";
import "https://css-theme-color-gen.val.run?name=secondary-theme-color&hsl=70deg,80pct,60pct&output-color-space=rgb&alphas-generated=5";
#test1 {
background: var(--primary-theme-color-300);
color: var(--secondary-theme-color-950);
}
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 |