Log inSign up
vex
vexcss-theme-color-gen
Public
Like
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 miliseconds.
Sign up now
Code
/
Search
main.tsx
https://vex--530488e83c9f11f085569e149126039e.web.val.run
README.md

css-theme-color-gen

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

Example

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);
}

Invalid Characters

Do not use spaces, percentage signs (%), or octothropes (#) in the URL unless you know what you are doing.

Query Parameters

NameValue FormatDocs
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.
colorWARNING: DO NOT USE THE OCTOTHROPE # FOR HEX NUMBERS; JUST TYPE THE HEX NUMBER BY ITSELF
A color that is auto-detected by chroma.js. CSS color keywords and hexadecimal RGB work here.
styletailwind|luminance-rangeThe 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-spacergb|hsl|lab|lch|oklab|oklchThe color function that is used in the generated CSS. Defaults to oklab
HTTP
Code