WORKFLOW · 20 OCTOBER 2026
From inspiration to implementation
Turn a photo or a promising palette into a small, portable design system.
A useful color workflow preserves decisions as well as colors. Start with inspiration, assign roles, verify pairs and export a format your next tool can read.
1. Bring in a starting point
Upload a reference to image to palette, or generate a harmony in the palette studio. The extractor uses a downsampled sRGB canvas and OKLab k-means clustering. Results represent the image's color distribution; they do not infer brand meaning or guarantee that small but important objects appear.
2. Keep the good parts
Lock individual swatches before generating again. Save a named version before exploring a new direction. Saved palettes live in this browser, so export JSON when you need a backup or a different computer.
3. Turn swatches into roles
The five roles are primary, secondary, accent, surface and ink. Use the role selectors in UI preview to try an arrangement. Check the foreground/background pairs that your product actually uses. A pale brand color can work as a background even if it is a poor text color.
4. Export for the next person
CSS variables are the simplest web handoff. The token JSON uses explicit sRGB components and color types; confirm compatibility with your token pipeline. SVG is a portable visual reference. Palunio's palette JSON includes the name, version and HEX colors, and can be imported back into your library.
5. Document what is not decided
A palette is not a full design system. You still need state colors, component rules, typography, spacing, motion, dark-theme review and accessibility testing in the target application. Keep the export small and useful, then expand with real product requirements.
Design Tokens Community Group: Format Module describes the exchange format used as a reference. Export support is not a claim of certification by that group.