Colours

A browser-based palette builder. Pick one or more base colours and they are placed on a colour wheel, with a ramp of tints and shades generated for each; the centre of the ramp can be shifted lighter or darker to bias the whole palette.

Controls cover colour space (HCL or HSV), harmony — mono, analogous, complementary, triadic, split-complementary, tetradic, square — and a colour-vision simulation for protan, deutan, tritan and achromat vision, so a palette can be checked as it would actually be seen. A WCAG 2 contrast grid scores every foreground/background pair against AA and AAA.

Built in vanilla JavaScript on chroma.js, with colour names from ntc. Palettes export as CSS custom properties, SCSS variables or an SVG swatch sheet, and any single colour copies to the clipboard with a click.