Определение цвета пикселя в браузере инструментом ColorZilla

Опубликовано: 11.03.2016

В этой статье на pod-kopirku.ru мы расскажем о небольшом, но очень полезном инструменте для браузера Mozilla Firefox или Google Chrome. Речь идет о ColorZilla — плагине для:

• определения цвета пикселя;
• составления CSS схемы цветового градиента;
• создания гармоничной цветовой палитры.

Когда нам требуется определение цвета пикселя в браузере, — решать только нам. К примеру, ColorZilla может оказаться полезным:

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

Среди прочих возможностей ColorZilla имеет дополнительные функции:

— копирование цветового значения пикселя в буфер обмена;
— увеличение изображения в браузере с помощью инструмента «Лупа»;
— разработка новых цветовых стилей CSS в каскадных таблицах;
— создание самых разнообразных градиентов цвета;
— исследование элементов DOM;
— коррекция цветовой модели с использованием миллиардов цветов и оттенков.

Определение цвета пикселя в браузере инструментом ColorZilla

1. Идем на официальный сайт разработчика плагина ColorZilla:
www.colorzilla.com

1387363768_ris-0

Проходим к инструменту «цветовая пипетка для браузера» (левая иконка) и выбираем необходимую нам вкладку из 3-х имеющихся:

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

2. Чтобы скачать плагин определения цвета пикселя для нашего браузера, необходимо всего лишь нажать на синюю большую кнопку с названием «Install ColorZilla ххх».

1387363692_opredelenie-cveta-pikselya-v-brauzere-1

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

— Первое – «Разрешить»
1387363688_1-1

— Второе – «Установить сейчас»
1387363687_1-2

-Третье – «Перезапустить сейчас»
1387363685_1-3

4. Работа с ColorZilla не вызовет вопросов даже у новичков. Иконка рабочего инструмента постоянно отображается в панели инструментов браузера в виде стандартной пипетки (похожий инструмент с теми же функциями и иконкой имеется в PhotoShop).

И чтобы активировать программу — нужно кликнуть по этой иконке (пипетке).

1387363899_opredelenie-cveta-pikselya-v-brauzere-3

5. Как видно, при наведении курсора на отдельный цветовой элемент, его свойства передаются в открывшуюся центральную панель программы. Если щелкнуть левой клавишей мышки на выбранном пикселе, ее цвет мгновенно «запоминается» ColorZilla и заносится в буфер обмена нашего компьютера.

1387363863_opredelenie-cveta-pikselya-v-brauzere-4

6. Дополнительные функции становятся доступными, если мы открываем вложенную менюшку программы ColorZilla через характерную стрелочку «вниз» или правую клавишу мышки. В частности, здесь можно видеть:

— экранную лупу;
— ссылку на палитру;
— ссылку на генератор градиента цвета;
— ссылку на элементы кода DOM;
— самые различные варианты представления и копирования одного и того же цвета, предложенные в различных стандартах.

Меню ColorZilla
1387363843_opredelenie-cveta-pikselya-v-brauzere-5

Палитра цветов
1387363878_opredelenie-cveta-pikselya-v-brauzere-6

Палитра цветов
1387363835_opredelenie-cveta-pikselya-v-brauzere-7

Генератор градиента
1387363900_opredelenie-cveta-pikselya-v-brauzere-2

Вот, собственно, и все. Инструкцию по определению цвета пикселя, по загрузке и установке плагина ColorZilla, по работе с данным инструментом и его возможностями, считаем закрытой. И напоследок еще одно полезное видео по рекомендациям автора pod-kopirku.ru:



0 0