CSS Color Palette

CSS

Upload

Output

Colors

Nothing yet :)

Press Alt+S To reveal shortcuts

Modify

Add Theme

Theme

Add Class

Class

Value

Theme Class

Color

Picker Hex

Page Notes

This page is a tool for building color palettes with css variables to create multiple themes for your website!

Each style is defined as a css class which, when set on an element on your page (like the <html> element), will make your defined color variables available for all children. This way you can specify colors throughout the rest of your css using the variables and let the user choose (either via javascript or a css media feature like prefers-color-scheme) which one to use.

The personalization control uses this approach to theming, as well as the theme switcher on my main site.

Owl has a really good blog post talking about a similar approach to theming on their website! (Also their site is just super cool and you should check it out anyway).

Files

Markup

palette.html

Scripts

palette.js
personalizationControl.js
shortcutsControl.js
svgIconControl.js

Styles

palette.css