import Video from "./components/Video" import Flex from "./components/Flex" import Img from "./elements/Img" import Div from "./elements/Div" import BlockLink from "./components/BlockLink" import Logo from "./components/Logo" import Span from "./elements/Span"
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
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.
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.
Image
Using the image tab you can import an image by uploading one, or loading a random photo from unsplash.com.
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.
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.
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.
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.
We’ve exposed the basic ColorBox controls for you to create and manipulate scales.
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.
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.
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.
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.
You can choose to autoplay through options by pressing the play button, or skipping forward or backward manually.
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.
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.
<Flex mb={4} mx="auto" width="100%" fontSize={[3, 4, 4]} maxWidth="64em" flexWrap="wrap"
<Img
css={{ objectFit: "contain" }}
src={${process.env.assetPrefix}/static/about/preview-panel-1.png}
/>
<Div width={1 / 3}>
<Img
css={{ objectFit: "contain" }}
src={${process.env.assetPrefix}/static/about/preview-panel-2.png}
/>
<Div width={1 / 3}>
<Img
css={{ objectFit: "contain" }}
src={${process.env.assetPrefix}/static/about/preview-panel-3.png}
/>
<Div width={1 / 3}>
<Img
css={{ objectFit: "contain" }}
src={${process.env.assetPrefix}/static/about/preview-panel-4.png}
/>
<Div width={1 / 2}>
<Img
css={{ objectFit: "contain" }}
src={${process.env.assetPrefix}/static/about/preview-panel-5.png}
/>
<Div width={1 / 2}>
<Img
css={{ objectFit: "contain" }}
src={${process.env.assetPrefix}/static/about/preview-panel-6.png}
/>
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.
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.
- 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.