How are dominant colors calculated?

The image is downsampled and analyzed in 3D color space. High-frequency colors with sufficient contrast from one another are selected to represent the visual aesthetic of the photo.

Can I use the exported CSS variables in my web projects?

Yes! The exported CSS snippet defines clean standard CSS variables that you can drop straight into your style sheets or Tailwind config.

影像 100% 客戶端

Image Color Palette Extractor

透過一鍵複製從任何照片中提取主要調色板和精確的十六進位、RGB 和 HSL 代碼。

零上傳

永遠不會離開瀏覽器

即時速度

WASM 加速

Drag & Drop your files here

or click to browse from your device

Extract 8 dominant, harmonious color swatches from any photo or design

Inspect HEX, RGB, and HSL values with one-click clipboard copying

Perceptual color distance clustering prevents duplicate or muddy shades

Export ready-to-use CSS Variables (--color-1, --color-2) or JSON palette

100% Client-side execution — fast, private, and works without servers

簡單的工作流程

如何使用這個工具

只需三個快速步驟即可獲得結果，無需任何學習曲線。

Upload Image

Select or drag any JPEG, PNG, or WebP graphic into the dropzone.

Extract Palette

Our browser algorithm extracts the dominant colors and calculates proportions.

Copy or Export

Click on any HEX code to copy, or export the palette as CSS / JSON.

需要幫助嗎？

常見問題解答

關於此工具您需要了解的一切。

探索更多

Loading...

Preparing your tools and workspace. Please wait a moment.

Image Color Palette Extractor

Drag & Drop your files here

如何使用這個工具

Upload Image

Extract Palette

Copy or Export

常見問題解答

相關工具

Color Palette Generator

Color Converter

Photo Filters & Effects

Loading...

Image Color Palette Extractor

Drag & Drop your files here

如何使用這個工具

Upload Image

Extract Palette

Copy or Export

常見問題解答

相關工具

Color Palette Generator

Color Converter

Photo Filters & Effects