В помощь веб-мастеру, или Как узнать код цветовой области

Автор: Антон Кокин
Компьютерра

Однажды на работе мне потребовалось узнать используемое значение (в формате HTML) цвета на одной страничке в интернете, а подходящих инструментов для этого не было. Мне посоветовали сделать скриншот экрана монитора, запустить Photoshop и, вставив картинку из буфера обмена, средствами программы узнать нужный мне код. Я сделал, как мне сказали. Однако перспектива загружать графический редактор всякий раз только для того, чтобы узнать цвет, меня не устраивала. И я задался целью выяснить, что в этой области придумано для веб-мастеров. Результатами своих поисков я делюсь в этом небольшом обзоре.

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

Pixie

Этой утилиткой от компании Nattyware World я пользуюсь давно и, откровенно говоря, не собираюсь ей изменять. Она полностью удовлетворяет мои потребности в таком простом деле, как HTML-верстка. К тому же, вес малютки в рабочем состоянии - всего восемь килобайтов с копейками, что в моем хит-обзоре выводит ее на заслуженное первое место.

Итак, вот что Pixie умеет делать:

• определять и показывать в своем маленьком окошке код цвета в форматах HTML и/или HEX (шестнадцатеричное значение цвета), RGB (цветовая палитра, множество комбинаций трех основных цветов: R - красный, G - зеленый и B - синий), CMYK (цветовая палитра, множество комбинаций четырех цветов: C - голубой, M - сиреневый, Y - желтый, K - черный), HSV (Hue - оттенок, Saturation - насыщенность, Value - величина или значение)
• определять координаты курсора мыши (от левого верхнего угла экрана)
• увеличивать область экрана в районе нахождения курсора мыши (в случае, если область цвета так мала, что сложно точно навести курсор)
• копировать в буфер обмена HTML-код цвета
• замораживать (останавливать) свою работу с последним определенным цветом

Копирование кода в буфер обмена, лупа и остановка работы возможны только с использованием сочетаний клавиш, которые, кстати, можно и переопределить. Так, чтобы скопировать код, нужно одновременно нажать Ctrl + Alt + C, для увеличения области экрана - Ctrl + Alt + Z. Если вы определили какой-то цвет и хотите приостановить работу утилиты с сохранением этого цвета, то нажмите одновременно клавиши Caps Lock и Scroll Lock. Повторное нажатие этого сочетания разблокирует программу.

Утилита позволяет работать и со стандартным инструментом Windows для определения цвета. Допустим, вы навели курсор на определенную цветовую область, но вам нужно что-нибудь посветлее или потемнее. Достаточно нажать сочетание Ctrl + Alt + X, и откроется диалоговое окно "Цвет", как на скриншоте ниже. Как с ним работать, я думаю, всем известно. Но разработчик программы (кстати, наш соотечественник Илья Левин) дополнительно предусмотрел и реализовал такую необходимую функцию, как копирование выбранного в этом "миксере" цвета в буфер обмена после нажатия кнопки ОК. Браво! Этой функции так не хватает в Windows.

Каких-то существенных недостатков у этой утилитки я не обнаружил, за исключением необходимости двойного щелчка для ее запуска из системной панели и невозможности закрыть программу оттуда же (нужно ее сначала открыть, а потом закрыть). Но это уже придирки.

EyeDropper

Не менее удобная и обладающая немалыми функциональными возможностями программа (версия 4.0 beta) от наших братьев из Словакии. А возможности действительно впечатляют. Программа не требует инсталляции и после запуска исполняемого файла вам становятся доступны все те функции, которые реализованы в Pixie, и дополнительно:

• возможность копирования в буфер обмена значений определяемого цвета в различных форматах (HTML, RGB, CMYK)
• снятие скриншота с области экрана (с возможностью выбора размера области), всего рабочего окна, объекта или активного окна. Скриншот отображается в рабочем окне программы. Здесь же есть кнопки, позволяющие скопировать картинку в буфер обмена, распечатать или сохранить в файл. Правда, файл можно сохранить лишь в формате BMP
• "горячие" клавиши для быстрой работы с утилитой

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

Интересно реализован доступ к опциям программы: нужно резко переместить курсор мыши вниз в область прямоугольника. Откроется небольшое окошко с шестью вкладками:

Поскольку это всего-навсего бета-версия, то обнаружились и очевидные недоработки. Совсем не понятно и нигде не указывается, как копировать в буфер обмена значения определенного цвета. Путем логического анализа выяснилось, что это делается нажатием сочетания клавиш Ctrl+C. Кроме того, у меня постоянно выпадали окошки с сообщениями об ошибках, после того как я сворачивал программу в системную панель. Приходилось принудительно закрывать программу через "Диспетчер задач".

С официального сайта программы можно скачать более ранние, устойчивые версии. Я протестировал версию программы 3.01. При попытке скопировать HTML-код цвета в буфер я получил код RGB. В настройках (на вкладке Clipboard) есть возможность выбора формата, но выпадающее окошко выбора с мышкой не работало. Как выбрать, я не мог понять. Написал письмо разработчикам и буквально через час получил ответ. Они сообщали, что выбирать формат нужно управляющими клавишами "вверх" и "вниз" клавиатуры. Действительно, получилось, но неудобно и неочевидно. Хотя поддержка пользователей на высоком уровне.

Quick HTML Color Picker

Эта программа не имеет каких-то особых наворотов. Определяет лишь значения цвета при наведении курсора-пипетки на цветовую область и показывает его в двух форматах: RGB и HTML.

При запуске программа выводит на экран свое окно, в котором есть только самые необходимые для работы инструменты: клавиши Pick Color и Copy, а также поля с образцом цвета и его значениями в указанных форматах.

При нажатии на кнопку Pick Color основное окно программы скрывается, уступая место небольшому окошку с пипеткой-курсором.

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

После того как курсор остановится над нужным цветом, следует нажать левую кнопку мыши. Значения цвета появятся в соответствующих полях основного окна программы. Теперь достаточно нажать кнопку Copy, чтобы скопировать код цвета в формате HTML. Если же отметить галочкой опцию Copy automatically, то после выбора цвета пипеткой его код автоматически скопируется в буфер обмена.

И еще одна полезная возможность реализована в программе. Клик мышью по полю с образцом цвета приведет к открытию стандартного диалогового окна выбора цвета.

Web Designers Tool Set

Основная функция программы - измерения, ибо это экранная линейка. Тем не менее, в ее состав входит и функция определения кода цветовой области в форматах RGB и HTML.

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

Чтобы открыть окошко определителя цветовых кодов (оно же Zoom - увеличение области экрана), надо после запуска программы нажать кнопку с изображением лупы на горизонтальной линейке, либо, что гораздо удобнее, нажать сочетание клавиш Alt + Z. На рабочем столе отобразится типичное информационное окошко с показаниями цвета в формате RGB и HTML.

Программа позволяет сгенерировать и скопировать в буфер код цвета в формате HTML. Для этого надо нажать сочетание клавиш Alt + T. Чтобы скрыть Zoom, нужно повторно нажать сочетание Alt + Z.

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

Возможно, среди читателей сайта "Компьютерра-Онлайн" найдутся программисты, которые захотят самостоятельно создать подобную программу для своих нужд. Я думаю, им будет интересно взглянуть на исходный код программы под Delphi для определения кода цвета пикселя под курсором. Вот ссылка для интересующихся.