Multiple image sources
Use local files, direct image URLs, Unsplash search, or voice search. Local image files are read with the browser File API.
Color tool
Vue 3
Browser-first
Visual Chromatics
A browser-based palette tool that extracts dominant colors from images and turns them into named CSS custom properties in HEX, RGB, or HSL.
01 · Why it exists
Eyedroppers find colors. This turns images into palettes.
A single sampled pixel rarely gives you a usable color system. Visual Chromatics clusters dominant colors from an image, names the results, and formats them for CSS so a palette can move directly into a design or prototype.
It is built for quick visual exploration: drag in a local image, search Unsplash, use a direct URL, or speak a concept into browser voice search when supported.
Core behavior
The workflow is image in, usable CSS out.
Palette extraction
ColorThief pulls dominant colors from the image, then the interface turns those values into a scannable palette.
CSS-ready output
Copy custom properties in RGB, HEX, or HSL formats and reuse prior palettes from the local history.
02 · Implementation
A small Vue app around image and color APIs.
| Piece | Role |
|---|---|
| Vue 3 | Composition API state and interface structure. |
| ColorThief | Dominant color extraction from image pixels. |
| Unsplash API | Image search for public inspiration sources. |
| Web Speech API | Optional voice search through Annyang where browser support allows it. |
03 · Privacy notes
Local image work stays local.
Files selected from disk are read by the browser and processed on the client. They are not uploaded to an application server for palette extraction.
Unsplash search still calls the Unsplash API, and voice search uses the browser's speech-recognition implementation. Those paths are separate from local file palette extraction.
Keep exploring