Определение цветов по пикселям. Как узнать цвет фона на странице? Выбирай ColorZilla

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

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

Для этого необходимо загрузить картинку на сайт. Для загрузки файла, нажмите кнопку «Обзор». Выберите нужный файл с изображением и нажмите «Загрузить». Как только картинка загрузится, вы увидите её на экране. Затем нужно навести курсор на тот пиксель, цвет которого вы хотите определить. В отдельном окне вы сможете увидеть цвет пикселя, а в поле «Текущее значение» отобразится соответствующий номер пикселя в HTML и RGB цвета пикселя.

Сервис предусматривает сохранение кода цвета в формате HTML и RGB цвета. Для этого нужно навести курсор на нужный пиксель и щелкнуть левой кнопкой мыши. В поле «Сохраненные значения» в отдельном окне вы сможете увидеть цвет пикселя, а так же сохраненные значения кода пикселя в формате HTML и RGB цвета.

Отзывы

Да вроде неплохо, спасибо
Норм
щедеврь
наес.
Помогли оч сильно лойс вам

Если у вас есть свой сайт, то вольно или невольно вам придется овладевать инструментами и навыками различных интернет-профессий. Инструменты дизайнера придется изучать особенно тщательно, так как путь к сердцу читателя лежит через профессиональное изображение. Красивые и правильно подобранные картинки на вашем сайте увеличивают вероятность прочтения информации, это факт! То, что эти картинки должны быть уникальными, это тоже неопровержимый факт. Для того, чтобы научиться самостоятельно делать картинки, мы должны узнать массу деталей, и одна из них — определение цвета любого элемента на интернет-странице. О том, как узнать цвет фона на странице, и пойдет сегодня речь.

Знаю, что есть масса других способов и инструментов, но я делюсь практическим, своим опытом по созданию картинок. Если вы не профессиональный дизайнер, то тогда вам эта статья очень пригодится в дальнейшей работе. Распознать цвет на странице можно с помощью полезного плагина ColorZilla для браузеров Mozilla Firefox и Google Chrome .

Когда нам нужен этот инструмент?

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

Как пользоваться ColorZilla?

Все очень просто! Переходим на сайт , нажимаем на левую иконку и выбираем ту вкладку, которая вам больше всего нужна:

— Mozilla Firefox (инструмент для браузера);
— Google Chrome (инструмент для браузера);
— Gradient Generator (онлайн инструмент).

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

Как работать с расширением ColorZilla

Напишу простыми словами о том, как я работаю с этим расширением. В момент создания или редактирования картинки в редакторе Canva, о котором подробнее вы можете прочитать, если перейдете по этой , бывает необходимо добавить фон, такой же, как у первоначального изображения. На картинке вы видите, что с правой стороны есть часть белого фона, который можно было бы окрасить в цвет фона картинки. Не имея такого расширения под рукой, сделать это очень проблематично, может если методом подбора, что не даст 100% идентичности. Нажимая на пипетку в расширении, и затем нажав левой клавишей мышки на любой пиксель картинки, вверху появляется отличная подсказка, которая дает мне код цвета в шестнадцатеричном формате и в RGB.

Для работы с редактором Canva мне необходим только шестнадцатеричный формат. Я его копирую, и затем уже в редакторе Canva вношу значение этого цвета, и результат меня очень радует. Вот так, буквально за пару движений я могу подобрать идентичный цвет, тем самым, придав уникальности первоначальной картинке, изменив ее размер.

Я предлагаю вам немного посидеть и познакомиться со всеми инструментами этого расширения, находящиеся в меню. Вы обязательно найдете парочку из них, которыми будете пользоваться с особым удовольствием. А остальными овладеете с течением времени. Вы лучше меня знаете, что в картинке можно изменить не только фон, а также бывает необходимость что-то написать. Подобрать подходящий цвет шрифта — тоже не такое простое дело, как кажется на первый взгляд. Возможно, что вам больше понравится палитра или генератор градиента, чем пипетка. В одном я уверена точно: с ColorZilla все вопросы можно решить очень быстро.

Как всегда, лучше один раз увидеть, чем сто раз прочитать! Поэтому, предлагаю посмотреть видео, в котором вы научитесь устанавливать расширение ColirZilla и использовать его в своей работе. Желаю приятного просмотра и красивых уникальных картинок!

HEX / HTML

Цвет в формате HEX - это ни что иное, как шестнадцатеричное представление RGB.

Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 - красный, 22 - зелёный, 33 - синий. Все значения должны быть между 00 и FF.

Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.

  1. h1 { color: #ff0000; } /* красный */
  2. h2 { color: #00ff00; } /* зелёный */
  3. h3 { color: #0000ff; } /* синий */
  4. h4 { color: #00f; } /* тот же синий, сокращённая запись */

RGB

Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.

Значения RGB задаются целым числом от 0 до 255. Например, rgb(0,0,255) отображается как синий, так как синий параметр установлен в его самое высокое значение (255), а остальные установлены в 0.

Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).

  1. h1 { color: rgb(255, 0, 0); } /* красный */
  2. h2 { color: rgb(0, 255, 0); } /* зелёный */
  3. h3 { color: rgb(0, 0, 255); } /* синий */
  4. h4 { color: rgb(0%, 0%, 100%); } /* тот же синий, процентная запись */

Цветовые значения RGB поддерживаются во всех основных браузерах.

RGBA

С недавних пор современные браузеры научились работать с цветовой моделью RGBA - расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.

Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

  1. h1 { color: rgb(0, 0, 255); } /* синий в обычном RGB */
  2. h2 { color: rgba(0, 0, 255, 1); } /* тот же синий в RGBA, потому как непрозрачность: 100% */
  3. h3 { color: rgba(0, 0, 255, 0.5); } /* непрозрачность: 50% */
  4. h4 { color: rgba(0, 0, 255, .155); } /* непрозрачность: 15.5% */
  5. h5 { color: rgba(0, 0, 255, 0); } /* полностью прозрачный */

RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.

HSL

Цветовая модель HSL является представлением модели RGB в цилиндрической системе координат. HSL представляет цвета более интуитивным и понятным для восприятия образом, чем типичное RGB. Модель часто используется в графических приложениях, в палитрах цветов, и для анализа изображений.

HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).

  1. h1 { color: hsl(120, 100%, 50%); } /* зелёный */
  2. h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
  3. h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
  4. h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */

HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.

HSLA

По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.

Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

  1. h1 { color: hsl(120, 100%, 50%); } /* зелёный в обычном HSL */
  2. h2 { color: hsla(120, 100%, 50%, 1); } /* тот же зелёный в HSLA, потому как непрозрачность: 100% */
  3. h3 { color: hsla(120, 100%, 50%, 0.5); } /* непрозрачность: 50% */
  4. h4 { color: hsla(120, 100%, 50%, .155); } /* непрозрачность: 15.5% */
  5. h5 { color: hsla(120, 100%, 50%, 0); } /* полностью прозрачный */

CMYK

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

Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).

Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).

Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 - жёлтой краски, и 46 - чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).

HSB / HSV

HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.

HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).

XYZ

Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.

LAB

Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.

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

Выбор за sanstv.ru: найдет код пикселя

Отлично, наконец начали делать онлайн сервисы на русском sanstv.ru, и вот адрес , отличительная черта разбивает файл до пикселя. Чтобы начать пользоваться прошу смотреть скриншот.

  • Можно вставить файл для определения путем нажатия кнопки PrtScr, при этом сделается снимок с всего браузера, но его видно не будет, чтобы показать на экране нажимаем cntrl+f.
  • Либо простым перетаскиванием с вашего компьютера в окно редактора.
  • Может делать по фото в хорошем качестве.
  • Удобно узнать окрас на сайте, сделал снимок и вставил.

После всех манипуляций увидите свою иллюстрацию и большое увеличение. Чтобы определить код (название) цвета надо навести на необходимый оттенок и посмотреть комбинацию.

  1. Наводим на необходимое место на экране, большое увеличение.
  2. Номер в двух формациях rgb и hex, оба используются, но популярнее hex.

Здесь много полезных вещей, например, как верстальщику соединение css. Создан альтруистом, за пользование денег не просит. Переходим к остальным сервисам.

Просто определить цвет онлайн с imagecolorpicker.com

Данный сайт imagecolorpicker.com отличается простотой определения цвета онлайн, работает быстро. Но простота дает некоторые ограничения:

  • Нельзя увеличивать, если только нажатием cntrl и +.
  • Чтобы определить оттенок нельзя пользоваться перетаскиванием и скринами, только загрузкой.

Сайт достоин внимания, пипетка выводится прицелом, не потеряйте.

Колорист imgonline.com.ua: поможет узнать даже цвет волос

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

Сначала прописываем количество основных оттенков (а именно пикселя на картинке которых больше будут упорядочены по убыванию). Выставляем сжатие, загружаем изображение, и ждем обработки. Так же может понадобится например парикмахерам, чтобы узнать цвет волос не тыкая, просто загрузить изображение прически и сервис разобьет на оттенок и название.

Стоковый getcolor.ru: по картинке не работает

Поместил в статью getcolor.ru потому что нет претендентов, огромный минус: нет поиска по картинке. Работает на основе простого оттеночного круга, и выбора нажатием. Перемещаете бегунок в нужно направлении и смотрите параметры rgb, а так же hex.

Хотя нет, нашел один плюс, умеет давать название окраске, посмотрите внизу, каждый раз выдает разные. Использование: например в каталогах и при html верстке.

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

Как правило, инструмент для определения цвета пикселей, или как его еще называют "пипетка", работает не выходя за рамки окна графического редактора. Чтобы разбить границы и получить возможность узнать цвет любого пикселя на экране, используйте программу-пипетку Just Color Picker. Программа не только определяет цвет в любой области экрана монитора, Just Color Picker это определитель цвета, превосходящий по возможностям штатную пипетку графического редактора и значительно расширяющий функциональные возможности такого инструмента. Эта полезная утилита поможет сэкономить время и станет хорошим помощником веб мастеру, дизайнеру, художнику, разработчику и любому другому, чья сфера деятельности связана с художественно-цифровым творчеством.

Программа пипетка с ведением истории выбранных цветов

С программой Just Color Picker удобно создавать палитру цветов для использования их в дизайн проекте. Ключевой особенностью приложения, выделяющей программу-пипетку из родственных и подобных программ-пипеток, является ведение утилитой истории выбранных пользователем цветов, которую можно сохранить в файл на диске. Это позволяет создать карту цветов и в дальнейшем выбрать из неё цвета для текста, фона, заливки и подчёркивания отдельных деталей презентации, добиться и достичь гармонии в общей цветовой гамме и в каждом отдельном элементе дизайнерского воплощения.

Когда программа Just Color Picker запущена, приложение сканирует область вокруг указателя мыши и отображает её своем окне. Для более точного "прицеливания" на пиксели в программе можно задать кратность увеличения от 3 до 15 раз. Just Color Picker определяет цвет и умеет кодировать и представлять его пользователю в форматах HTML, RGB, RGB, HEX, HSB/HSV, HSL (255) и HSL(240). Подведите мышку к цвету, который необходимо узнать, нажмите Alt+X и утилита тут же дополнит список ранее выбранных цветов новым, находящимся под курсором мыши, и отобразит его кодовое обозначение. К каждому присутствующему в журнале истории цвету можно написать комментарий. Выбрав из меню программы дополнительный инструмент "Текст", Вы сможете предварительно увидеть как будет заголовок или абзац с выбранным цветом символов и вариантом шрифта гармонировать и сочетаться с фоном. Just Color Picker наделена простым и понятным интерфейсом, занимает небольшой объем памяти, не требует установки и абсолютно бесплатна.

Скриншоты программы Just Color Picker