Color palette generator

The harmonies, on the color wheel

Harmonies place colors at set angles around the color wheel from your color. Octoolo keeps your color's saturation and lightness and turns the hue (in HSL), so a soft color gives a soft palette:

Starting from Octoolo's cobalt, #2A62F2, the triadic palette is #2A62F2, #F22A62 and #62F22A, with a lighter step of the second and a darker step of the third. A common way to use a palette is the 60-30-10 rule: one color for most of the surface, one for a third, and an accent for the small things that should stand out.

Random palettes with locks, and colors from a picture

Random makes palettes that hang together rather than five unrelated colors: it picks a starting hue, places the others by a random scheme (neighbors, opposites, thirds or a square), and spreads their lightness from dark to light so there is something for text and something for backgrounds. Press Space (or New palette) for another. Lock a color you like and it stays while the rest change; the next palettes are built around it. A palette can have 2 to 10 colors.

From a picture finds the colors a photo or a logo is made of. Octoolo shrinks the picture, groups its pixels into the number of colors you ask for (2 to 12) by how alike they look, a method called k-means, and shows each color with its share of the picture, biggest first. The same picture always gives the same palette. Transparent pixels are left out, so a logo on a see-through background gives the logo's colors. The picture never leaves your PC.

Need one exact color from a picture rather than its main ones? The Photo Editor's eyedropper picks a single pixel, as the color picker page shows.

Contrast, and taking the palette into code

Under each color, two figures show its contrast with white and with black, from 1:1 (none) to 21:1, graded the way the Web Content Accessibility Guidelines do: AA from 4.5:1 is enough for normal text, AA large from 3:1 for large text and icons, AAA from 7:1, and Fails below 3:1. Use the higher of the two to decide whether a color takes white or black text; the HEX on each swatch is already written in the better one.

The panel under the palette has Copy HEX list, Copy CSS variables (a :root block with --color-1, --color-2 and so on, shown in the panel), Copy JSON (each color's hex, rgb and hsl) and Save PNG, a picture of the swatches with their codes for a mood board or a client. To turn a single color between formats, or check a color you already have, use the color converter.