Color Picker 9000

Introduction

Welcome to Color Picker 9000. The tool I use to create the stylesheets for my site.

This page is a live preview of the generated styles. Play around with the controls to get things the way you like. Copy the CSS at the bottom of the page when you're done and paste it into your stylesheet to use the settings.

The picker provides settings for five colors. This text uses base color. The heading at the top of the page uses the heading color and the link uses the accent color. There's also a warning color and an info color.

Each of the five colors have three variants: default, faded, and faint. The swatches further down the page have previews of all of them.

The tool outputs CSS variables with OKLCH values. They can be used anywhere a colors can.

The example swatches provide previews of background using the colors as well.

Modes

Two color modes are available: light and dark. The generated CSS starts with variables for each like --light--default-base-color.

Variables without the mode prefix are defined as well (e.g. --default-base-color). One version is default in the base :root like:

--default-base-color: var(--switch--default-base-color, var(--light--default-base-color));

A second version is defined in a @media (prefers-color-scheme: dark) {} section:

--default-base-color: var(--switch--default-base-color, var(--dark--default-base-color));

These variables look for a --switch--default-base-color variable that can be updated with JavaScript to set the mode explicitly. If that variable isn't set, the mode falls back to calling --light or --dark as appropriate. Browsers that receive mode preferences from the operating system use them to switch modes automatically.

Combined, that sets up the page to use the following order to set the mode:

1. Use the value from --switch--default-COLOR-color if it exist.

2. Otherwise, use either the default value or the value from @media (prefers-color-scheme: dark) if the browser receives the mode preference from the operating system.

3. Finally, fallback to using light mode if neither a switch nor OS provided mode is available.

TODO

• Add texture feature like Texture Maker.

• Document black, white, match, reverse colors.

• Add ability to set faded and faint values for black, white, match, and reverse.

• Document color-scheme auto setting for light/dark mode.

• Add swatch selector that let's you pick a background color and a foreground color to see how they look together.

• Generate optional utility classes (e.g. for borders).

• Add a note about how this is built with bittyjs.

• Provide a way to update the example HTML.

• Make controls look better.

• Keep controls visible/sticky so the content can be scrolled without losing the controls.

• Add ability to show/hide controls.

• Add ability to launch second window with preview content so it can be viewed independently.

• Review things on mobile.

• Add a Save/Load feature that outputs a JSON object.

• Add settings to the URL in a comment that gets updated so a link can be sent to a given theme.

• Add high contrast modes.

• Add ability to import fonts.

• Add colors.js to show contrast ratios.

• Build utility classes.

Swatches