How does the tool extract colors from the image?

It downscales the image and runs a k-means clustering algorithm on the pixels to group similar colors and identify the most dominant ones.

What output formats are supported?

You can export your palette as CSS variables, SCSS variables, a Tailwind configuration object, JSON design tokens, or all formats simultaneously.

How are the shade scales generated?

The tool holds the hue and saturation of the extracted base colors constant while stepping the lightness value to create a smooth ramp from light tints to dark shades.

Can I customize the naming of the generated tokens?

Yes, you can choose between numeric names (e.g., color1, color2) or semantic names (e.g., primary, accent) and define a custom token prefix.

What image file formats can I upload?

The tool supports PNG, JPG, JPEG, WebP, GIF, and AVIF image files up to 10MB.

Elysia Tools

Navigation

Design

Image Palette to Design Tokens

Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each

Details

What this tool helps you do

Upload an image and the tool will:

Downscale it and run k-means clustering on the pixels to find the most dominant colors (you choose 3 / 5 / 8 / 12).
Name each color (numeric color1… or semantic primary/accent…) and attach a population % so you can see which colors dominate.
Optionally generate a shade scale for every color (Tailwind-style 50–950 or Material-style 100–900) by holding hue & saturation roughly constant and stepping lightness — giving you a usable ramp from light tint to dark shade.
Serialize the result into your chosen format(s): CSS variables, SCSS variables, a Tailwind config object, JSON design tokens, or all four.

Pick a token prefix (e.g. brand, app) and a naming style, copy the generated code straight into your project, and your design system immediately consumes the palette.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

1 examples

Extract a 5-color palette with a Tailwind scale

Upload a hero image, extract 5 dominant colors, generate a 50–950 scale for each, and export as CSS variables with prefix "brand".

<div>5 swatches with population %, a base+scale preview row each, and a :root{} CSS-variables block ready to paste.</div>

Inputs

Set the required fields, then run the tool.

6 options

FilesUpload source files for this workflow.1

Source ImagefileRequired

Single file max size: 10 MBSupported types: image/png, image/jpeg, image/webp, image/gif, image/avif

ContentPaste or type the main input values.1

Token PrefixtextOptional

SettingsAdjust formats, ranges, numbers, and modes.4

Palette SizeselectOptionalShade ScaleselectOptionalOutput FormatselectOptionalNaming StyleselectOptional

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Image Palette to Design Tokens

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Generating Tailwind Theme from a Hero Image

2. Extracting CSS Variables for a Brand Redesign

FAQ

Web Image Processing Python Samples

Web Image Processing TypeScript Samples

Android Image Processing Java Samples

Android Image Processing Kotlin Samples

Data URI Generator

Batch Image Convert

Batch Image Crop

Image Resizer

Image Format Conversion and Animated Export Tools

JSON Interchange and Format Translation Tools

JSON Inspection, Diff, and Transformation Tools

Image Cleanup, Framing, and Batch Prep Tools