# 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 > Canonical page: https://elysiatools.com/en/tools/image-to-design-tokens - **Category:** Design - **Keywords:** palette, design tokens, color extraction, css variables, scss, tailwind, json tokens, image, k-means, color scheme, design system, brand colors ## Overview Upload an image and the tool will: 1. Downscale it and run **k-means clustering** on the pixels to find the most dominant colors (you choose 3 / 5 / 8 / 12). 2. Name each color (numeric `color1`… or semantic `primary`/`accent`…) and attach a population % so you can see which colors dominate. 3. 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. 4. 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. ## Inputs - **Source Image** (file): PNG, JPG, WebP… - **Palette Size** (select) - **Shade Scale** (select) - **Output Format** (select) - **Token Prefix** (text): e.g. brand, app, theme - **Naming Style** (select) ## When to use - When you need to extract a brand color palette from a logo, photograph, or mood board image. - When building a design system and you need to generate consistent Tailwind-style (50–950) or Material-style (100–900) shade scales from base colors. - When transitioning design assets into developer-friendly formats like CSS variables, SCSS variables, or JSON design tokens. ## How it works - Upload an image (PNG, JPG, WebP, GIF, or AVIF) which is downscaled to perform fast k-means clustering on the pixel data. - Select the desired palette size (3, 5, 8, or 12 colors) and choose between numeric or semantic naming styles. - Optionally generate a shade scale (Tailwind 50–950 or Material 100–900) that steps lightness while keeping hue and saturation constant. - Export the final palette and scales as CSS variables, SCSS variables, a Tailwind config object, or JSON design tokens. ## Use cases - Extracting a cohesive color palette from a client's brand image to bootstrap a new web project. - Generating a complete Tailwind CSS color configuration with 50–950 shades directly from a hero photograph. - Creating standardized JSON design tokens from mood board images for cross-platform design system synchronization. ## Frequently asked questions ### 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. ## Related tools - [Data URI Generator](https://elysiatools.com/en/tools/data-uri-generator): Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown - [Batch Image Convert](https://elysiatools.com/en/tools/batch-convert): Convert multiple images to different formats with quality settings and batch processing - [Batch Image Crop](https://elysiatools.com/en/tools/image-batch-crop): Batch crop multiple images to specific dimensions or aspect ratios with custom positioning. Returns cropped images as a ZIP download. - [Image Resizer](https://elysiatools.com/en/tools/image-resize): Professional image resizing tool with multiple resize methods, aspect ratio preservation, and format conversion, supporting GIF/Animated WebP/APNG and JPEG/PNG/WEBP. - [Image Bit Depth to PNG Converter](https://elysiatools.com/en/tools/image-to-bit-depth-png): Convert images to exact monochrome, indexed, grayscale, RGB, or RGBA PNG bit depths with verified output. - [Image to WEBP Batch Converter](https://elysiatools.com/en/tools/image-to-webp-batch-converter): Convert up to 20 uploaded images, or images inside a ZIP archive, into WebP files packaged as a ZIP - [PDF Photo Contact Sheet](https://elysiatools.com/en/tools/pdf-photo-contact-sheet): Generate paginated photo contact sheets with thumbnails, filenames, and EXIF lines - [Batch Image Convert](https://elysiatools.com/en/tools/image-batch-convert): Convert multiple image files between different formats like JPG, PNG, WebP, AVIF, TIFF, GIF with quality settings and batch processing ## Samples - [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion - [Web Image Processing TypeScript Samples](https://elysiatools.com/en/samples/web-image-processing-typescript): Web TypeScript image processing examples including image read/save, scaling, and format conversion - [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion - [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion ## Related content - [Image Format Conversion and Animated Export Tools](https://elysiatools.com/en/hubs/image-convert): Compare image format converters for JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64, and animation-friendly exports in one hub. - [JSON Interchange and Format Translation Tools](https://elysiatools.com/en/hubs/json-convert): Compare JSON conversion tools for CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN, and related structured formats in one hub. - [JSON Inspection, Diff, and Transformation Tools](https://elysiatools.com/en/hubs/json-utility): Compare JSON formatting, diffing, path inspection, schema validation, merging, transformation, and export tools in one hub for API and data workflows. - [Image Cleanup, Framing, and Batch Prep Tools](https://elysiatools.com/en/hubs/image-utility): Compare image cleanup, trimming, padding, framing, batch resize/compress, watermarking, and visual polish tools in one hub for asset preparation workflows.