color-map

color-map reads every color form in CSS Color 4 and 5, converts between the 15 CSS color spaces, mixes colors the way color-mix() does, and builds scales and role-based palettes from one brand color. Colors are plain JSON, { colorSpace, components, alpha? }, shaped like the W3C design-token color value.

The pages below run the library in your browser. They import color-map/color, color-map/scale and color-map/palette straight from this repository’s workspace, so what you see is what the current source does.

Color converterPaste any CSS color and see it in every space, with in-gamut flags and a clip-versus-map comparison.

Mix and relative colorTry color-mix() and relative colors, with the library's answer next to your browser's.

Palette builderTurn a brand color into scales, harmonies and a validated set of role pairs.

Export panelWrite a scale or palette as a Tailwind v4 theme, CSS variables or DTCG tokens.

CompareFeatures, browser size and speed next to culori, Color.js, chroma-js, @texel/color, lightningcss and colord.

Library, CLI and agent skillEntry points, API, size budgets, the color-map command and the agent skill.

Why not the browser

The browser already does most of this, but only for painting. It gives a script no scale to choose from, no contrast target to solve for, and no way to read a color back in another space. Most browsers also clip an out-of-gamut color to the display, while color-map keeps the value or maps it with the CSS Color 4 algorithm. The converter and mixer pages show both side by side.