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: v48View 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
| Name | Value Format | Docs |
|---|---|---|
| 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 | <check https://gka.github.io/chroma.js/#chroma> | 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. |
hsl Can rgb, color: colorString, "alphas-generated": alphasGenerated = "10", name, style = "tailwind", "luminance-range-size": luminanceRangeSize = "100", "output-color-space": outputColorSpace = "oklab",