Cloudflare Logo MarkAboutThinking

About

When we revisited our palette last year, we built some custom tooling to help us construct and preview palettes. We’ve begun to package up some of this work into a web app others can use to create or import a palette and preview multiple depths of accessible combinations against a set of UI elements.

The goal is to make it easier for anyone to work seamlessly with color and build beautiful interfaces with accessible color contrasts.

To help you make use of the tool, we’ve put together a little walk through of the following features

  • Importing palettes from a url, image, or js theme file
  • Generating palettes with Palx, or ColorBox
  • Preview accessible color combos against a collection of UI elements
  • Visualizing all accessible combinations with contrast scores
  • Simulate different types of color vision deficiencies
  • Rapidly cycle through available combinations
  • Add, remove, or edit any color in the palette

Getting started

If you are working on a color palette you’re likely to be starting from scratch or modifying something that already exists. One of our initial priorities was to make it easy to import an existing color palette in a variety of formats.

URL

Using the CSS Stats API we pull colors in from your websites production code so you can start to augment your current palette without a lot of setup work. This will grab all style sheets, style tags, and inline styles and parse them for colors. You can also link directly to any hosted css file. Note if your css is malformed, importing colors with this method might fail.

Importing a color palette from a URL
Importing a color palette from a URL

JSON

You can also import your palette as an array of colors. This will also import the JSON export you get after constructing a palette. This way you can save things locally over time to load them back into the app.

Preview of JSON import interface
Preview of JSON import interface

Image

Using the image tab you can import an image by uploading one, or loading a random photo from unsplash.com.

Palette creation from image import
Palette creation from image import

A palette is created from the top 10 most dominant colors in the image. You can try to generate stills from movies, photos, or screenshots of other palette collections like colorlovers.com or color.adobe.com and use them to start your palette.

Palette from color.adobe.com
Palette from color.adobe.com
Palettes from colorlovers.com
Palettes from colorlovers.com

Creating a palette

Palx

There are a few ways to generate palettes within the tool. Palx is an open source palette generator that creates a palette based on a single color. The generated palette will includes luminance-scaled variations of gray and 12 different hues.

Sample Palx palette from Rebass
Sample Palx palette from Rebass

We’ve wired Palx up so you can quickly generate palettes and preview them. Enter in any hex code and click generate to get a new palette.

Palette generated from Palx with color #07c
Palette generated from Palx with color #07c

ColorBox

Lyft built an amazing open source tool for generating palettes called ColorBox. It allows you to fluidly iterate through different scales applied to hue, saturation, and lightness changes. You declare start and end values for each property as a set of constraints, and then select the easing function that will determine the curve.

https://colorbox.io
https://colorbox.io

We’ve exposed the basic ColorBox controls for you to create and manipulate scales.

ColorBox controls
ColorBox controls

Set how many steps (array length of colors) you want in the scale, and set Start and End points for Hue, Saturation, and Luminosity. Play around with using different curves for each property to see how they affect your scales.

Try to create different scales for red, orange, yellow, green, teal, cyan, blue, indigo, violet, and gray. If you want to construct a palette from a number of different scales, click ‘Add to palette’ when you’re ready to add it. To start from scratch, you can click “Replace Palette” to remove all of the existing colors and replace them with your new scale.

Palette build with ColorBox
Palette build with ColorBox

Editing a color

To edit a color click on any swatch in the palette. A color editor will appear below. You can edit the hex code as text, or use the RGB or HSL sliders. In the top right, you’ll get instant feedback on the contrast ration between the color and black and white. Here we see this color is accessible with both at level AA.

Edit colors as Hex, RGB, or HSL
Edit colors as Hex, RGB, or HSL

Previewing a palette

The larger swatches indicate that color is currently being used in the preview panel. Below the palette you’ll see the currently previewed colors collocated together with their respective labels.

Palette and currently previewed colors
Palette and currently previewed colors

To update one of the preview colors, drag any color from the palette onto this bottom row of previewed colors or click on the color to adjust it manually.

Locking a color will leave it unchanged as you cycle through various options. You can lock several colors to constrain preview options. If you are working on a dark mode version of your UI, you may find it useful to pin the background color to black or dark gray.

How selected colors from the palette map to the preview panel
How selected colors from the palette map to the preview panel
The next cycle with the parent background color locked
The next cycle with the parent background color locked

Previewing options

You can choose to autoplay through options by pressing the play button, or skipping forward or backward manually.

Preview controls
Preview controls
View of controls during autoplay
View of controls during autoplay

If you discover a combination you like, tap or click the heart to save it for later. Find your likes below the preview panel on the left hand side. Click on any row to preview that combination.

History of saved palettes
History of saved palettes

The preview panel shows the application of a color set to a variety of shapes at different sizes to see the various ways the colors relate to each other. This is not yet comprehensive and doesn’t represent the full generative space of how your palette could be applied to UI. In the future, we hope to allow for multiple preview modes with more components and configurability options. Ideally we’d have a full UI kit that would find the closest color for certain canonical UI themes (e.g. buttons for primary, secondary, and destructive actions) in addition to a suite of common data visualization patterns with heavy data sets to stress test the palette.

Color blindness filters

To visualize the various ways colors are perceived by 12% of the population, colorblind filters will change the appearance of the entire page, allowing you to preview the docs or UI components. You can find this panel below the preview panel on the left side.

Filter selection
Filter selection
Orange scale pre-viewed across 8 colorblind filters
Orange scale pre-viewed across 8 colorblind filters

Docs

Below the preview panel you’ll also find a table of documentation with a few global stats about your palette and how many accessible combos there are.

For each color in your palette, the documentation will show

  • Hue of the color (useful for colorblind developers and designers)
  • Preview of color as background, text and as a border
  • Color in hex, rgb, and hsl formats
  • Contrast ratio with both black and white. If it’s accessible it is bolded.

As you build your scales you can use this info to create optically balanced scales - where the middle step in your scale is accessible with both white and black. Normally the values for both will be around 4.5-4.6. It can be extremely helpful to have a color that can be used with both white and black, especially if it’s a predictable step across scales.

Below the palette is a link to preview all of the accessible color combinations.

Each color is visualized as both text and background with its accessible pair along with its corresponding contrast score. In the future we’d like to add filtering and sorting by color, hue, saturation, and contrast levels.

Even if you don’t want to change your palette, this tool can be useful to preview accessible color combinations available within your current production code. You can think of it as Css Stats + Colorable.

Export

At any point in time you can export your palette as JSON, CSS variables, Sass variables, or a JS theme file. Right now we automatically generate the names, but you can manually tweak them after exporting.

Future Roadmap

While we’re excited about the beginning of this tool, we’re far from done. Here is a sample list of features we’d like to add in the future.

  • More components - The current component set is limited and could use additions to more accurately simulate how color is used in UI. Analytics and data visualization components, with large series counts, are a good way to stress test the accessibility and aesthetic quality of a palette.
  • More import methods - Allow for direct file upload of various filetypes: sass, less, stylus, theme-ui, or npm packages.
  • More export methods - Extend exports to be able to handle exporting any UI library with a configured color theme e.g. Rebass, Material UI, Bootstrap, BassCss, Tachyons, Ant Design, Evergreen, Primer, etc.
Rebass themes
Rebass themes
  • Live preview of site - with ability to cycle through applications of the existing palette, or cycle through accessible options with a new palette. Could potentially deploy a worker to apply design changes at the edge of our network. Below is a proof of concept Harley Turan put together.
  • Syntax theme generator - apply all possible accessible combinations of a palette to a code syntax theme. Allow export for all editors and environments.
Examples of multiple syntax themes generated from a single palette
Examples of multiple syntax themes generated from a single palette
  • Color migration tools - define inputs for a new and old palette. Visualize how to migrate from one palette to another with ability to drag and drop results for further customization. Outputs interactive and customizable migration documentation.
  • Grid view for docs - Currently there is only a list view of the documentation but should allow for switching between grid and list views.
  • Open source components - Open source palette visualization and docs components so you can configure the themes and use them in your own style guide.

  • Flexible color application - Currently we show 5 colors with strict mappings in the preview panel (border, background, color, parent background). Ideally you could apply colors as you see fit to the preview elements. For instance you might want some text inputs to have light backgrounds and some to have transparent backgrounds. Or maybe you want to see different color borders on the icons than on the text inputs. Ideally you could drag a color onto any part of an element to change its color mapping.

  • Custom content - Components and content could be 100% configurable. Allowing for mixing and matching components from various popular open source UI kits and libraries e.g. Rebass, Bootstrap, Material UI, Ant, as well as customizing text and image content.

  • Fluid editing - Ability to select multiple colors and edit them in a uniform manner (e.g. select all reds and desaturate by 8%) or apply an easing curve across any property.

  • Named Groups in Palette - Currently we export a flat array but in the future we’d like to allow for attempting to sort colors into groups that can be customized if needed. Additionally new groups could be added. Group names would be configurable.

  • Configurable color names - Auto name them but allow to override / customize names.

  • Color sorting - Add ability to sort by multiple parameters within a palette both in palette and docs.

  • Single component view - Currently we show one color combo previewed against a number of palettes. We’d like to add the ability to see a single component against a number of color combos.

  • Configurable dominant color count - Expose configuration for setting how many colors to grab from an image.

  • 3d Visualizations - While color pickers often show color in 2d, it can be helpful to visualize a palette in 3D within a user declared color space. This can allow for more pattern recognition over time on the spatial relationship between colors. In addition you could visualize deltas between two palettes in 3D as an animated transition between two states.

  • More properties - Currently we are only showing color against backgrounds, borders, and text. Ideally we’d also allow for wiring up text-shadows and box-shadows as both incorporate color and can influence the perception of other colors in your UI.

We want this tool to be useful for our community, so we welcome feedback on desired features. If you would like to add or upvote ideas, become part of the discussion here

Big thanks to the following projects:

Chroma JSColorBoxPalxColorableCss StatsUnsplash