Нажмите или перетащите в любое место изображения, чтобы выбрать цвет.
После нажатия на картинку для подбора цвета она будет записана сюда для удобного просмотра и повторного сравнения.
Начиная
Нет необходимости устанавливать какое-либо программное обеспечение, весь процесс выполняется на веб-странице, а увеличительное стекло помогает точно позиционировать.
Нажмите, чтобы выбрать или перетащить изображение прямо на веб-страницу. Поддерживаются форматы JPG, PNG, WebP и GIF. Каждое изображение не должно превышать 20 МБ. Одновременно обрабатывается только одно изображение.
Наведите курсор на картинку, лупа отобразит окружающие увеличенные пиксели в реальном времени, а красная рамка отметит конкретное место, которое нужно подобрать.
Нажмите или отпустите палец в целевом месте, чтобы выбрать цвет, и значения в форматах HEX, RGB и HSL будут отображены немедленно.
Нажмите кнопку копирования рядом с соответствующим форматом, чтобы скопировать значение цвета в буфер обмена и вставить его для использования.
Поиск неисправностей
Палитра цветов — это интерактивная функция просмотра, которая щелкает мышью, чтобы прочитать значения цвета пикселей. Он не создает никаких файлов экспорта, и нет понятия «пакетный» — независимо от размера загруженного изображения, вы нажимаете на определенное место один за другим, чтобы прочитать цвет, поэтому этот инструмент поддерживает только загрузку одного изображения и не обеспечивает пакетный режим.
Он полностью завершен в браузере вашего текущего устройства. С помощью встроенной в браузер возможности чтения пикселей Canvas значение цвета соответствующей позиции считывается непосредственно из данных изображения без загрузки исходного изображения на какой-либо сервер.
То, что отображается в увеличительном стекле, представляет собой увеличенный эффект небольшой области вокруг текущей позиции курсора. На самом деле улавливается цвет конкретного пикселя, отмеченного красной рамкой; если само изображение имеет градиенты или шум, цвет соседних пикселей будет немного отличаться. Если вы нажмете и выберете пиксель, отмеченный красной рамкой, цвет будет точно соответствовать и не будет никаких отклонений.
История выбора сохраняется только в памяти браузера текущей страницы, что позволяет сравнивать несколько выбранных цветов за одну операцию. История будет очищена после обновления или закрытия страницы и не будет сохранена или загружена навсегда. Если вам необходимо сохранить определенное значение цвета в течение длительного времени, рекомендуется сначала скопировать и вставить его в свои заметки или инструменты дизайна.
HEX (например, #FF3B30) — наиболее часто используемый формат в веб-разработке и большинстве инструментов дизайна. Его легко и просто наклеивать и использовать; RGB (например, rgb(255, 59, 48)) более интуитивно понятен, когда значения трех красного, зеленого и синего каналов необходимо настраивать отдельно; HSL (например, hsl(4, 100%, 59%)) описывает цвета по оттенку, насыщенности и яркости, что более удобно, когда необходимо настроить глубину или насыщенность на основе одного и того же оттенка. Все три формата описывают один и тот же цвет. Просто выберите соответствующий формат в соответствии с инструментом или кодом, в который вы действительно хотите вставить.
Может. Средство выбора цвета считывает исходные данные пикселей после декодирования изображения, на что не влияет размер отображения страницы — даже если изображение уменьшено и отображено на странице, цвет пикселя в соответствующей позиции все равно точно считывается в соответствии с истинным разрешением самого изображения при захвате, и не будет отклонения цвета из-за масштабирования отображения.
Весь процесс выбора цвета и чтения пикселей выполняется локально в браузере, и изображение не проходит через какой-либо сервер.
При наведении курсора пиксели вокруг курсора увеличиваются в реальном времени, а красный прямоугольник отмечает конкретный пиксель, который нужно захватить.
HEX, RGB и HSL отображаются одновременно. Нажмите кнопку «Копировать», чтобы вставить непосредственно в инструмент дизайна или код.
Никакой регистрации, никакой оплаты и никаких скрытых ограничений на использование.
Применимые ситуации
Не список возможностей, а "когда стоит тащить картинку вверх?" Если не помогло, смените инструмент, не применяйте его с силой.
Когда вы увидите цветовую схему веб-сайта или концепцию бренда, которая вам нравится, загрузите снимок экрана и непосредственно щелкните ключевой цветовой блок, чтобы получить точное значение HEX для вашего собственного дизайна или кода.
Извлекайте естественные тона, такие как небо, кожа, растения и т. д., из пейзажной или портретной фотографии в качестве образца для подбора цветов дизайна или иллюстрации.
При разработке и восстановлении эскиза дизайна возьмите HEX-значение сравнения цветов на скриншоте чертежа дизайна и скриншоте фактической страницы, чтобы быстро убедиться в точности восстановления цвета, не догадываясь невооруженным глазом.
цветовой формат
Существует три разных метода описания одного и того же цвета. Выберите соответствующий формат в соответствии со сценой, которую необходимо вставить.
| Формат | Пример написания | Распространенные сценарии использования |
|---|---|---|
| HEX | #FF3B30 | Веб-CSS, поля ввода цвета для большинства инструментов дизайна (например, Figma, Photoshop). |
| RGB | RGB(255, 59, 48) | Сцены, требующие отдельного просмотра или настройки значений красного, зеленого и синего каналов. |
| HSL | всл(4, 100%, 59%) | Описывайте по оттенку, насыщенности и светлоте, что позволяет легко регулировать оттенок или насыщенность одного и того же оттенка. |
Эти три формата описывают один и тот же цвет, но числовое представление различно; каждый формат на странице можно скопировать одним щелчком мыши и вставить непосредственно в используемый вами инструмент дизайна или редактор кода.
Техническое описание
Изображение сначала будет декодировано в браузере и нарисовано на холсте с тем же разрешением, что и исходное изображение. То, что вы видите на странице, — это лишь уменьшенный эффект отображения этого холста; когда вы щелкаете мышью, чтобы выбрать цвет, цвет будет считан на основе положения экрана и преобразован обратно в реальные координаты пикселей холста. Поэтому, какое бы маленькое изображение ни отображалось на странице, точность подбора цвета всегда будет соответствовать исходному разрешению изображения и не будет искажаться при масштабировании изображения.
Функция выбора цвета — «щелкнуть, чтобы прочитать значение цвета пикселя». Это чисто интерактивный инструмент просмотра. Он не создает никаких файлов изображений, которые необходимо загрузить. Естественно, не существует пакетной семантики «несколько изображений, каждое из которых обрабатывает несколько результатов». Если вам нужно выбрать цвета из нескольких изображений по отдельности, вы можете напрямую загрузить их по одному и просмотреть по одному. Каждый раз, когда вы переключаете изображения, текущая история выбора будет очищена.
Нет необходимости открывать счет. Если вы удовлетворены, приступайте к пакетированию. Если нет, просто измените параметры и повторите попытку.