Создайте палитру цветов по фотографии: по умолчанию 8 цветов, можно от 5 до 12, у каждого указана доля в изображении. Скопируйте любой образец или экспортируйте набор как CSS-переменные, JSON или PNG для мудбордов и фирменного стиля.
Как пользоваться
- Откройте изображение, перетащите его на карточку или вставьте скриншот через Ctrl+V. До этого показан пример.
- Наведите указатель на изображение, чтобы увидеть лупу, и щёлкните, чтобы взять цвет пикселя. На телефоне держите палец на картинке, ведите, пока лупа не покажет нужный пиксель, и отпустите.
- Нажмите на HEX, RGB или HSL, чтобы скопировать цвет. Последние цвета остаются в ряду рядом с большим образцом.
- Палитра обновляется сама. Выберите от 5 до 12 цветов и метод, нажмите на образец, чтобы скопировать его, и экспортируйте палитру в CSS, JSON или PNG.
- Метод k-средних объединяет похожие цвета и обычно даёт самую естественную палитру. Медианное сечение делит диапазон цветов поровну и сохраняет мелкие акцентные цвета.
- Основной цвет — самая большая группа в палитре. Средний цвет считается по всем видимым пикселям, поэтому часто выходит приглушённым.
- Большие изображения для пипетки уменьшаются до 2400 пикселей по длинной стороне, однотонные области при этом остаются точными. Полностью прозрачные пиксели не учитываются.
- Изображение остаётся в браузере. Ничего не загружается.
Точный выбор пикселя
Наведите указатель на изображение — появится увеличенная лупа — и щёлкните. На сенсорном экране задержите палец, ведите его, пока лупа не покажет нужный пиксель, и отпустите. Большие изображения для выбора уменьшаются до 2400 px по длинной стороне, поэтому однотонные цвета логотипов и интерфейсов определяются точно. В фотографиях есть шум, и соседние пиксели неба могут немного различаться — более представительный цвет даст палитра.
Как строится палитра
K-means объединяет похожие цвета и обычно даёт самую естественную палитру для фото. Median cut равномерно делит цветовой диапазон и сохраняет мелкие акцентные цвета — хорошо для иллюстраций и фирменной графики. Для каждого цвета показана его доля в изображении.
Основной цвет — самая большая группа. Средний цвет — среднее всех видимых пикселей, поэтому это часто приглушённый оттенок, которого на самой картинке нет. Полностью прозрачные пиксели не учитываются.
Как использовать коды
HEX (#1e88e5) — привычный формат для CSS, графических редакторов и брендбуков; RGB задаёт тот же цвет красным, зелёным и синим от 0 до 255; HSL описывает тон, насыщенность и светлоту, что упрощает подбор более светлых и тёмных вариантов. Палитру можно экспортировать как CSS-переменные, JSON или PNG-образцы.
Частые вопросы
Как узнать код цвета на картинке?
Откройте изображение, наведите лупу на нужное место и щёлкните или отпустите палец. Коды HEX, RGB и HSL появятся рядом с образцом и копируются одним касанием.
Можно ли взять цвет со скриншота?
Да. Вставьте скриншот через Ctrl+V или перетащите файл. Скриншоты подходят лучше всего, ведь в их цветах нет шума камеры.
Почему выбранный цвет немного отличается от фирменного?
Сжатие JPEG и обработка в камере слегка меняют значения пикселей. Для логотипов по возможности берите исходный PNG или SVG либо сравните несколько соседних пикселей.
Чем основной цвет отличается от среднего?
Основной — это самая большая группа похожих пикселей. Средний смешивает все пиксели, поэтому красно-синее изображение даёт фиолетовый, которого на нём может вовсе не быть.
Сколько цветов может быть в палитре?
От 5 до 12. Меньше цветов — видна основная гамма, больше — заметны и мелкие акценты.
Загружается ли изображение на сервер?
Нет. Картинка открывается и анализируется прямо в вашем браузере, а сам файл никуда не отправляется и не сохраняется на серверах.