Click a swatch to copy its code. Drag tiles to reorder or move them between palettes.
No palettes match your filter.
Create a palette for each brand or project. Add colours by hex code or picker, then click any swatch to copy it.
Your library saves automatically, but only to this browser on this device. It doesnât follow you to another machine, another browser, or from the desktop file to a hosted copy. Export is how you back it up, move it, or share it.
Export downloads the whole library, every palette and swatch, as one JSON file named with todayâs date. Itâs plain text, so itâs easy to keep in a project folder or send to a colleague.
Inside a Rise or LMS code block, downloads are blocked by the browserâs sandbox. Export switches to a copy-the-text mode: paste the JSON into a text editor and save it with a .json extension.
Import reads an exported file, shows what it found, then asks how to apply it. Merge adds the fileâs palettes alongside what you already have. Replace clears your library first and canât be undone.
Teams can keep brand colours consistent by sharing one exported file. Everyone imports and merges the same set.
Create one per brand or project with New palette. Click a paletteâs name to rename it. Duplicate copies it, â and â reorder it, Delete removes it and its swatches.
Use the + Add tile. Single mode takes a picker or hex code and an optional name. Press Enter to add and keep going. Bulk paste takes a list: one colour per line as Navy #030F40, or codes separated by commas or spaces.
The From image button pulls the dominant colours out of a logo or brand asset. Drop a file in, click to browse, or paste a screenshot, then untick any strays and create the palette. The image is read entirely in your browser and never uploaded.
Pick samples a colour from anywhere on your screen, other windows included, and adds it straight to the palette. One colour per click; Esc cancels. Needs Chrome or Edge (the buttons donât appear in other browsers).
Click any swatch to copy it. The HEX / RGB toggle sets the format. Copy list copies a whole palette as name-and-code lines.
Drag tiles to reorder them or drop them into another palette. â edits a swatchâs name, colour or palette. The filter box narrows the page to matching palettes: match by palette name, or by any swatch name or code inside one.
The stacked-bars button on each tile opens a nine-step ramp: four tints towards white, the base, four shades towards black. Click a step to copy it, or Add to keep it in the palette. Handy for hover states, backgrounds and borders.
The Contrast button opens a WCAG 2.2 checker. Set a foreground and background (from the picker, hex field or eyedropper), see the ratio, and check pass/fail for AA and AAA body text, large text, and non-text elements. From any swatchâs â dialog, Check contrast jumps straight in with that colour as the foreground. Each palette also has a Grid button showing every colour pair in the palette at once, so you can see which combinations are safe for text before a course ships.
The Vision button on each palette previews it as seen with protanopia, deuteranopia and tritanopia, plus a greyscale row for print. Any pair of colours that becomes hard to tell apart under a simulation is flagged beneath the preview, so you know before a learner does.
The â button in the header switches between light and dark mode. The app opens in light mode, and your choice is remembered for next time. The HEX / RGB toggle and your last contrast pair are remembered too.
Everything saves automatically to this browser. To back up, move between machines, or share with a team, use Export and Import. The âšď¸ button next to Export explains how.
This view runs inside a sandbox (a Rise or LMS code block), which blocks file downloads. Copy the text below, paste it into a plain text editor (Notepad, TextEdit) and save the file with a .json extension. Bring it back in with Import later.
Ratio and pass/fail lines follow WCAG 2.2. Text checks apply to body copy, headings and non-text UI. Foreground is your text or icon colour; background is what sits behind it.
Body copy at 16px sets the pace for most e-learning. The quick brown fox jumps over the lazy dog.
Sample buttonRows are the text colour, columns are the background. AAA ⼠7:1 (body text AAA) ¡ AA ⼠4.5:1 (body text) ¡ Large ⼠3:1 (large text and UI elements only) ¡ Fail below 3:1. Click any cell to open it in the full checker.
Tints mix towards white, shades towards black, in 20% steps either side of the base. Click a step to copy it, or Add to keep it in the palette.
Simulated with the Machado, Oliveira and Fernandes (2009) model. About 1 in 12 men and 1 in 200 women have some form of colour-vision deficiency. Pairs that become hard to tell apart are flagged below the grid.
Pulls the dominant colours out of a logo or brand asset. Everything happens in your browser; the image is never uploaded anywhere.