A tool for moving colors you already have into variables
Once the colors are decided, the tedious part is pairing each one with a token name and writing two sets of declarations, light and dark. This generator does not invent colors: it takes the ones you have chosen and emits the :root variable block together with a matching dark-mode block. Variable names are normalized to lowercase and hyphens, which removes a common source of silently broken declarations.
The contrast ratios shown alongside use the relative luminance definition from W3C WCAG exactly as written. Each channel is scaled to 0 to 1, linearized around the 0.04045 threshold, weighted by 0.2126, 0.7152 and 0.0722, then the lighter and darker results each get 0.05 added before dividing. Every token color is compared with the page background for the same mode, and the AA threshold for normal text is 4.5:1. This reflects October 2026.
A contrast ratio only means something for tokens used as text or icons. Surface and border tokens sit close to the page background, so a low figure there is expected. Checking every pair in a palette against every other pair is not done here; a dedicated contrast tool covers that, and color steps are not generated either.
Frequently asked questions
It does not generate colors. It takes colors you have already chosen and moves them into variable declarations paired with token names. Building color steps is the job of the Simplewoody palette generators.
If you want to follow the operating system setting, the media query alone is enough. If you plan to add your own theme toggle you need the attribute selector, and emitting both lets the setting be the default while the toggle overrides it.
The moment colors become variables, one token sits on two different backgrounds. A token meant for text or icons often clears the threshold in one mode and misses it in the other, so the ratio for each mode is listed.