Image extraction
Drop a JPG, PNG, or WebP file onto the upload zone, or paste one directly from your clipboard. The image never leaves your device. Instead, the tool reads the pixel data locally using a canvas element and extracts the most dominant colors in milliseconds.
To try another picture, click Clear on the input zone. The previous palette will reset and the tool will be ready for a new file.
Semantic swatches
The extractor uses the node-vibrant algorithm to cluster colors by visual importance, not just raw pixel count. It outputs semantic swatches with roles like Vibrant, Muted, DarkVibrant, and LightMuted.
Click the color block of any swatch to copy its exact HEX code. Each swatch also displays its RGB values and includes a Shades link, which opens the Tailwind shade generator initialized with that specific color.
Code export
At the bottom of the tool, you will find a code pane containing your entire palette. The CSS Variables tab formats the colors into a :root block with variable names based on the semantic roles. The JSON Data tab provides a structured array containing the roles, HEX, and RGB values.
Use the Copy button in the pane header to instantly grab the code for your stylesheets, design system configurations, or Tailwind themes.