Как получить цветовую палитру из изображения

Шаги

1. Откройте «Генератор цветовой палитры» и перетащите в него изображение.
2. Основные цвета появятся сразу. Ползунком запросите меньше или больше, от 2 до 12.
3. Нажмите на образец, чтобы скопировать его код HEX.
4. Или скопируйте всю палитру списком либо как переменные CSS.

Как выбираются цвета

Похожие пиксели группируются, и каждая группа усредняется до одного цвета, поэтому цвет, занимающий большую часть изображения, идёт первым. Процент на образце показывает, какую долю изображения занимает эта группа.

Полностью или почти прозрачные пиксели игнорируются, поэтому логотип на прозрачном фоне даёт цвета логотипа, а не тёмный пустой.

Как использовать палитру

"Скопировать как переменные CSS" даёт пользовательские свойства вроде --colour-1, которые можно сразу вставить в таблицу стилей. Простой список удобен для заметок или программы для дизайна.

Если в изображении различимых цветов меньше, чем вы запросили, вы получите только те, что в нём есть. Логотип из трёх цветов даст три образца, а не двенадцать. Для одного точного цвета лучше использовать пипетку.

Советы

Берите изображение с нужным вам настроением. Палитра настолько хороша, насколько хорошо изображение, из которого она получена, а фото заката даёт совсем другие цвета, чем снимок товара.

Выбирайте из палитры два-три цвета, а не все. Большинство дизайнов лучше всего работают с одним основным цветом, одним акцентным и одним нейтральным, а проценты подсказывают, какие цвета главные кандидаты.