Tools LucasqcTools LucasqcTools Lucasqc

Image Color Extractor & Palette Generator Online

Extract colors from any image directly in the browser, generate palettes, copy CSS variables and create themes for your projects — all locally.

该工具的内容尚未完全翻译成中文,目前展示的是英文版本。我们正在逐步翻译所有工具,如果你希望我们优先翻译某个工具或有其他建议,欢迎点击右下角的 建议工具 按钮告诉我们。

使用该工具

Drag an image here or click to select

JPG, PNG, WebP, GIF, SVG, BMP

🔒 100% local processing. No image is sent to any server.

快速指南与实用说明

100% local color extraction

This tool analyzes uploaded images and automatically extracts the most dominant colors. All processing happens in the browser using Canvas, with no data sent to any server.

You can adjust the number of extracted colors, filter whites/blacks, and export the palette in multiple formats used in CSS, Tailwind and design tools.

Available export formats

The tool offers multiple export formats for immediate use in real projects.

  • CSS Variables: --color-1: #7c3aed; ready to paste in :root.
  • JSON: array with hex, rgb and hsl for each color.
  • Tailwind config: theme.extend.colors with automatic names.
  • Sass/SCSS: variables $color-1: #7c3aed.
  • HEX list: simple list of hex codes.

Design systems and themes

By extracting colors from a brand image or reference photo, you can quickly generate a base color set for a design system. The tool suggests name and weight (light, main, dark) for direct use in components.

Each extracted color can be opened directly in the Color Converter to explore variations, check contrast and generate scales.

Privacy and security

No image leaves your device. Processing happens via the browser Canvas API. The tool works offline after initial load.

常见问题

Is the image sent to a server?

No. All processing is local in the browser using Canvas API. No image leaves your device.

What image formats are supported?

JPG, PNG, WebP, GIF, SVG and BMP. Any format the browser can render.

Can I adjust how many colors are extracted?

Yes. Use the slider to select from 3 to 16 colors. More colors generate more detailed palettes.

What do the percentages on colors mean?

They represent the approximate proportion of pixels of that color in the image. Higher percentage colors are more dominant.

How to export the palette as CSS?

Click the export button and choose "CSS Variables". The code will be copied to your clipboard ready to paste.

Can I use extracted colors in Tailwind?

Yes. Use the "Tailwind Config" export to generate a snippet that can be pasted directly in tailwind.config.ts extend.colors.

Does it work on mobile?

Yes. You can upload photos from gallery or take camera photos. The interface is responsive for any screen.

其他实用工具

相关链接,帮助你继续完成类似任务,无需重新开始。

HEX, RGB & HSL Color Converter

Convert colors between HEX, RGB, HSL, HSV, CMYK and other formats, see live preview, copy CSS code and compare contrast.

Visual CSS Generator

Create gradients, shadows, borders, border-radius, glassmorphism, filters and animations with sliders and copy the CSS code.

使用该工具的具体任务

针对常见用途的快捷入口,使用相同的完整流程。

color palette generator

extract colors from image online

隐私与本地处理

本页面的工具直接在你的浏览器中运行,不会将输入内容发送到后端服务器。这样可以提升隐私保护并降低延迟。