ColorJar

ColorJar is a web based tool I built for extracting color palettes from images. The idea came from my own design workflow where I would frequently need to pull colors from reference images, screenshots, or photos to use in projects. The tools that existed for this were either desktop applications that felt heavy for such a simple task, or web tools that were cluttered with ads and upsells.

The core feature is straightforward: upload an image or paste a URL, and ColorJar analyzes it to extract the dominant colors. The algorithm groups similar pixels together and identifies the most prominent color clusters, giving you a clean palette that represents the image. You can adjust how many colors to extract and fine tune the results.

Beyond extraction, I added a random palette generator for when you need inspiration rather than a specific reference. It generates harmonious color combinations using color theory principles, so the results actually look good together rather than being purely random. You can lock individual colors you like and regenerate the rest, which is a nice way to explore variations.

The image viewer supports zoom and pan, which turned out to be more important than I initially thought. When working with large images, you often want to focus on a specific area to pull colors from, and being able to zoom in makes that much easier. I implemented this using the Canvas API, handling touch events for mobile and mouse events for desktop.

Export options include CSS variables, Tailwind config values, SCSS variables, and plain hex codes. I wanted to support the formats that developers actually use so you could go directly from palette to code without any manual copying. Each format is one click to copy to the clipboard.

Making the interface work well on mobile was a priority. A lot of design inspiration happens on phones when you are browsing, visiting places, or just noticing colors in the world around you. The touch interactions for navigating images and tapping colors feel natural on smaller screens.

I built ColorJar with React and TypeScript, with Tailwind CSS handling the UI styling. The Canvas API does the heavy lifting for image rendering and color sampling. The entire application runs in the browser with no server side processing, so your images never leave your device.