В помощь веб-мастеру, или Как узнать код цветовой области
Однажды на работе мне потребовалось узнать используемое значение (в формате 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 для определения кода цвета пикселя под курсором. Вот ссылка для интересующихся.
По материалам журнала КомпьютерраOnline (www.computerra.ru)
|
