ページを読み込んでいます
Extract dominant color palettes from images and copy them as CSS variables, Tailwind config, or SCSS maps. Visualize color area ratios.
Drag & drop the image you want to extract colors from, or click to select a file.
Adjust the number of colors (3–12) with the slider and click 'Extract Palette'.
View the extracted colors in HEX/RGB/HSL format and copy them as CSS variables, Tailwind config, or SCSS map.
Drag & drop an image here
or click to select a file
Supported formats: JPEG, PNG, WebP, GIF (max 10MB)
Image Palette to CSS is an online tool that automatically extracts dominant colors from images and converts them into code formats usable in web development. Using k-means clustering, it accurately detects the most prominent colors in an image. Extracted colors are displayed in HEX, RGB, and HSL formats, and can be copied as CSS variables, Tailwind color config, or SCSS maps with one click. All processing is done in your browser, so your images are never sent to a server.
No. All processing is done entirely in your browser. Images are never sent to a server.
JPEG, PNG, WebP, and GIF formats are supported. Maximum file size is 10MB.
Yes. You can freely adjust between 3 and 12 colors using the slider.
CSS variables (:root), Tailwind CSS color config, and SCSS map — three formats are supported.