Пиксели прозрачнее половины не учитываются: их цвет всё равно не виден. В режиме «Точно» разбор идёт по полному разрешению, ограничение только на очень большие снимки — от четырёх мегапикселей картинка ужимается по площади.
/tool/palette-from-image/ работает пипетка, семь форматов, экспорт файлами
Дайте картинку файлом, перетаскиванием, вставкой из буфера, ссылкой или адресом страницы — инструмент разложит её пиксели и покажет цвета с долей каждого. По картинке можно ткнуть пипеткой, палитру — поправить руками, а результат забрать файлом.
Пять путей: выбрать файл, перетащить его в рамку, вставить из буфера через Ctrl+V, дать ссылку на картинку или адрес страницы — из страницы возьмём её og:image.
Полоса стоит выше, в панели: ширина образца там — доля цвета в картинке. Здесь та же палитра разобрана по строкам, и её можно править: лишний цвет удалить, нужный закрепить, любой заменить пипеткой или переставить.
Пока нечего показывать. Дайте картинку — или откройте ссылку с готовой палитрой.
Ссылка держит саму палитру, а не картинку: её можно переслать, и у того, кто откроет, будут ровно эти цвета.
Всё считается на устройстве и сохраняется прямо из браузера — ни один файл никуда не отправляется.
Имена переменных — palette-1…N. Значения — в выбранном выше формате.
ASE открывают Photoshop, Illustrator и InDesign; GPL — GIMP, Inkscape и Krita; sketchpalette — Sketch.
Образцы с подписанными значениями — чтобы приложить к письму или задаче.
Каждая пара цветов палитры друг против друга по WCAG. Сразу видно, какой цвет можно ставить текстом на каком фоне, а какую пару придётся разводить.
Матрица появится, когда в палитре будет хотя бы два цвета.
Дайте картинку любым из пяти способов: файлом, перетаскиванием в рамку, Ctrl+V из буфера, ссылкой на картинку или адресом страницы. Разбор начнётся сразу.
Выберите, сколько цветов достать и как их сводить. Медианное сечение держит доли, k-средних лучше разделяет близкие оттенки, «Акценты» вытаскивают яркий и приглушённый цвет отдельно.
Ткните пипеткой прямо в картинку — цвет этой точки добавится в палитру и закрепится. Лупа ×8 показывает, в какой именно пиксель вы целитесь.
Переставьте, удалите или замените лишние цвета в списке. Закреплённые цвета переживают смену числа цветов и способа разбора.
Переключите формат — HEX, RGB, HSL, HSV, CMYK, OKLCH или Lab. Он действует и на список, и на копирование, и на выгрузку файлом.
Посмотрите матрицу контраста: она сразу говорит, какую пару цветов из палитры можно ставить текстом на фоне.
Заберите результат файлом: CSS, SCSS, Tailwind, JSON, ASE, GPL, sketchpalette, PNG или SVG. Ссылка на палитру пересылается кому угодно.
Гистограмма 32×32×32 → сведение к N цветам → доля по ближайшему цвету
Пиксели прозрачнее половины не учитываются: их цвет всё равно не виден. В режиме «Точно» разбор идёт по полному разрешению, ограничение только на очень большие снимки — от четырёх мегапикселей картинка ужимается по площади.
Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.
В гистограмме занято две ячейки: у красной счётчик 60, у синей 40. Остальные 32 766 пустые и в разборе не участвуют.
Обе ячейки лежат в одной коробке. Размах по красному 255, по зелёному 0, по синему 255 — при равенстве берём первый, красный.
Режем по красному в точке, где по обе стороны поровну пикселей: слева синяя ячейка, справа красная.
В обеих коробках по одной ячейке, делить дальше нечего: вместо четырёх вернётся два цвета.
Цвет коробки — среднее по её пикселям: #0000FF и #FF0000. Доли — 40 % и 60 %.
Палитра: #FF0000 — 60 %, #0000FF — 40 %. Порядок по доле, а цветов меньше запрошенного, потому что в картинке их всего два.
Файл — правда. Он читается локально и рисуется в canvas, оттуда берутся пиксели; сетевых запросов при этом не происходит. На наш сервер уходят только адреса. Адрес страницы — когда вы пользуетесь полем «Адрес страницы»: сервер забирает разметку и достаёт из неё og:image. Адрес картинки — только вторым заходом, если первый не удался: сначала картинку всегда пробует взять сам браузер, мимо нас.
Инструмент возьмёт её через наш сервер. Браузер не даёт читать пиксели чужой картинки, если сервер, который её отдал, не разрешил это заголовком Access-Control-Allow-Origin, — это защита самого браузера, и со стороны страницы её не обойти. Поэтому первый заход всегда прямой, а когда он не удался, тот же адрес уходит к нам: сервер забирает картинку и передаёт её вашему браузеру уже со своей стороны, где запрета нет. Под окном предпросмотра появляется строка о том, что картинка пришла этим путём. Не выйдет с картинками тяжелее четырёх мегабайт и с теми, что отдаются только по паролю: такую скопируйте и вставьте через Ctrl+V.
«Быстро» разбирает копию в 240 px по длинной стороне. Доли от этого почти не меняются, но мелкая деталь — логотип на фото, тонкая цветная линия — при уменьшении растворяется и в палитру не попадает вовсе. «Точно» строит гистограмму по полному разрешению: такие акценты остаются на месте, а скорость почти та же, потому что цветов в гистограмме всё равно не больше 32 768.
Потому что по умолчанию цвет — среднее по всем пикселям группы. Если в группу попал градиент от светло-синего к тёмно-синему, средним будет что-то посередине, и такого пикселя в картинке может не быть. Поставьте флажок «Брать ближайший реальный пиксель» — тогда цвет заменится на настоящий пиксель той картинки, по которой шёл разбор: в режиме «Точно» это ваше изображение целиком, в режиме «Быстро» — его копия в 240 px. Само разбиение картинки от флажка не меняется: он влияет только на то, каким числом записан каждый цвет.
Медианное сечение — когда нужны честные доли и общее настроение. k-средних — когда цвета близки и надо разделить оттенки кожи, неба или металла. «Акценты» — когда нужен не средний цвет, а именно яркий: они отдельно вытаскивают яркий, светлый, тёмный и приглушённый цвет и подписывают каждый.
Деление останавливается, когда резать больше нечего: во всех коробках лежит по одному цвету. Так бывает у логотипов, иконок и плоских иллюстраций. У «Акцентов» цветов всегда до семи — число цветов на них не влияет.
Пиксели, прозрачные больше чем наполовину, пропускаются: их цвет на экране всё равно не виден. Сколько таких пикселей нашлось, написано отдельной строкой.
Adobe Swatch Exchange открывают Photoshop, Illustrator и InDesign — палитра приезжает в «Образцы» одним файлом. Для GIMP, Inkscape и Krita берите .gpl, для Sketch — .sketchpalette.
Кнопка «Ссылка на палитру» кладёт цвета прямо в адрес страницы. У того, кто откроет ссылку, будет ровно эта палитра — с матрицей контраста, форматами и выгрузкой. Картинка по ссылке не передаётся: она осталась у вас, поэтому долей у такой палитры не будет. Если нужны и доли, приложите PNG из раздела «Забрать файлом».
Всё, что вы взяли пипеткой, добавили или заменили, помечается закреплённым и переживает смену числа цветов и способа разбора: пересчитываются только незакреплённые. Доли пересчитываются всегда и для всех — каждый пиксель уходит тому цвету палитры, к которому он ближе, поэтому доля есть и у цвета, добавленного вручную.
Палитра красивая ещё не значит, что ей можно набирать текст. Матрица показывает отношение контраста для каждой пары и отмечает, какая пара проходит по AA и AAA. Пара с отношением ниже 3:1 текстом не годится совсем — только заливка и декор.