Jon Lee

Design Resources


Free variable fonts:

To create WOFF files from TTF, I use Andrew Sun’s WOFFer. Tools by free font sites like fontsquirrel include options that appeared to strip or alter some of the tables for variable fonts I use.

opentype.js font and glyph inspector can parse OpenType and TrueType fonts and display their metadata.

Tools for generating assets

Creating a web color scheme has a premise of creating a web palette of five colors that allow for light-on-dark and dark-on-light designs. I find it most useful when I anchor one or two of the colors based on the color schemes above. (Up to 5 colors)

Huemint utilizes AI to generate color schemes (up to 4 colors)

ColorBox creates gradients with HSB controls. Kevyn Arnott, the creator, explains the re-design from the original Lyft ColorBox.

Picular gives you colors based on a search term.

Colorgorical makes categorical color palettes for information visualizations.


Favicon Generator: generate favicons from an image useful for preparing a browser window to grab a screenshot

Colorizer: convert from one color schema to another

Japanese Color Schemes

A post on the now-defunct hacklabo blog discussed color combinations inspired by Japanese design, but the swatches are all images in P3 color space. I recreated the swatches here using HTML, and include a text sample.

Clicking on any of the elements will copy the corresponding color; clicking on the background color for the swatch will copy that instead.

Swiss Style Color Picker

Taken from