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

Витягніть домінуючу палітру кольорів і точні коди HEX, 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.

Потрібна допомога?

Часті запитання

Все, що вам потрібно знати про цей інструмент.

Досліджуйте більше

Пов'язані інструменти

Переглянути всі Зображення

Color Palette Generator

Миттєво створюйте гарні довільні колірні палітри.

Генератори На пристрої

Color Converter

Перетворюйте коди кольорів між форматами HEX, RGB і HSL.

РозробникПопулярний На пристрої

Photo Filters & Effects

Застосуйте до зображень фільтри відтінків сірого, сепії, інвертування, вінтажу, яскравості та контрастності.

Зображенняновий На пристрої

Loading...

Preparing your tools and workspace. Please wait a moment.