Theme Machine 2.0

I’ve just released a huge update to the Theme Machine. This is a tool a first put online last summer for building color palettes and exporting them as CSS custom properties. If you haven’t played with it yet, go a head and give it a try.

Note: I made the tool responsive, so you can play around with it on mobile and see what it does, but it’s really designed to be used on desktop as part of a web development workflow.

New changes ¶

There’s a lot in this update! Here are all the biggest changes:

More vivid colors ¶

Originally, I thought it made sense to have your fully saturated accent colors, as chosen in the color wheel, and then slightly desaturated shades of that to use for UI elements like backgrounds and borders. However, the Theme Machine already generates one or two neutral colors based on your chosen colors, so this seems unnecessary. If you want more desaturated colors, you can add them, but by default now the generated shades have enough saturation/chroma to match your exact selected colors.

Shade generation settings ¶

With the chroma changes above, I had some decisions to make regarding how to treat generation of the shades of each color. Online polling led to split opinions, so I decided to expose the option to the user and let you decide what you need.

There are three options for how shade lightness is calculated: “Uniform lightness” generates shades of hand-selected lightness values (derived from Open Props 2.0 beta). It’s unlikely your selected colors precisely align with one of these lightness values, however, so this option will slightly round your selected color to the nearest shade. With this option, each palette will have uniform lightness across all shades (e.g. --blue-4 will have the exact same lightness as --green-4).

I think these hand-selected values produce the best looking palette, so I’ve left it as the default, but if you have precise brand colors you want in your palettes, the “prioritize selected colors” option will preserve them exactly. The shades above and below your color are spaced evenly in the OKLCH color space.

The final option, “center on selected colors” places your selected colors at the center of the palette, and evenly distributes lighter and darker shades in each direction.

For the chroma options, the default value, “centered” places the most vivid colors near the middle of each palette (This is also based on Open Props approach). If your selected colors are particularly light or dark, however, this can produce overly saturated colors near the middle. The second option, therefore, ensures your selected colors are the most saturated ones in each palette, and the lighter and darker shades have less chroma.

Color wheel options ¶

The Color Wheel allows you to select harmonious colors of equal lightness and chroma, using the OKLCH color space. This can be problematic with some hues, especially yellows, which get muddy and brown at lower lightness levels.

I’ve added an option to “brighten muddy yellows” to help with this. You can also fine tune your colors further in the Shade Generator after selecting them in the Color Wheel.

I’ve also changed the color wheel behavior, so the colors you find in the wheel are not automatically all added to your palette. You can add them all yourself, or add them individually if you wish. Then, you can continue to use the wheel to find more colors and add those to your palette before moving on to the Shade Generator page.

Semantic color variables ¶

There are new semantic custom properties you can edit to build out your general website theme. There are three background colors, two text colors, and a primary brand color.

Swatches of each are displayed near the bottom of the screen. Click on one of these to edit it, by selecting from the shade palettes above.

WCAG contrast checking ¶

Examples of both text colors on each of the the background colors appear on the right side of the screen. A green checkmark circle icon appears if the combination meets the AA standard for text color. This is stacked in front of a second circle if AAA is met. If the contrast is low, a red caution icon appears.

Click on the icon to see the exact contrast measurement and which WCAG criteria this value meets for text, headings, and graphical elements such as icons and buttons.

Full preview page ¶

I’ve found that a palette in the Theme Machine doesn’t always feel the same after exporting it and using it to build a full interface. The Theme Machine has a dark background and colors of its own that can influence how your theme colors appear.

A new Preview page shows only your colors, building the page entirely out of your selected semantic colors and shades. This should give a clearer idea of how your theme will appear in a real-world website.

A number of mock UI widgets appear on the page in a range of your colors. Hovering the mouse over this will display exactly which of your colors were used to generate the element.

Public issue tracker ¶

I’ve started a public issue tracker on GitHub where you can leave feedback, report bugs, and request features. Let me know what you want to see!

I have a handful of further improvements I’d like to make, but until then, happy theming!!