Mac OS X

индекс
118,30

Стандартный Color Picker для веб-дизайнера

image

Любой веб-дизайнер трудящийся на Маке не раз сталкивался с проблемой получения цвета напрямую с экрана или из окна браузера. Существует множество способов это сделать, например панель Web Developer в Safari или целая армия всеразличных «экранных линеек» от сторонних разработчиков.

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


Что есть изначально?


image

Колор пикер умеет брать цвет экрана, достаточно нажать на кнопку с изображением лупы в левом верхнем углу каждого таба. Он позволяет удобно выбирать цвета, поддерживает CMYK, RGB и HSB и т.п. Вобщем, функционал вполне достаточный.

Не хватает только hex значений. Для этого надобно установить плагин. Их существует довольно-таки много, но методом проб и ошибок я выбрал один, наиболее удобный именно для веб-дизайна: Hex Color Picker от Waffle Software. Во-первых, он бесплатен и во-вторых его интерфейс был самым наглядным и понятным, что важно при быстрой работе с окнами.

Вот какие еще плагины для Color Picker'а мне удалось найти:
Old Jewel Software — Painter's Picker (платный, $20)
Chromatic Bytes — Shades (платный, $18)
Lithoglyph — Mondrianum 2 (бесплатный, интегрируется с Adobe kuler)
Tangerine (аж $40 хотят)
Developer Color Picker (бесплатный, судя по адресу сайта от создателей Transmit и Coda)

Установка плагина для Color Picker


Скачать Hex Color Picker можно здесь.

Плагин для Color Picker, представляет из себя бандл с расширением .colorpicker. Все плагины сосредоточены в укромном месте в директории пользователя:
~/Library/ColorPickers/

Достаточно распаковать скачанный архив и затащить файл HexColorPicker.colorPicker туда. После этого перезапускаем открытые приложения, пробуем выбрать цвет и видим еще одну вкладку в окне выбора цвета. Теперь hex'совое значение будет доступно в любой аппликации.

image

По началу я столкнулся c некоторыми проблемами — схваченные с экрана цвета не соответствовали, тем что были заданы в CSS. Решение было простым и нашлось в настройках плагина.

image

Оказалось, что нужно отключить получение калиброванных цветов.

LittlePicker для хабрачеловека


Нарадовавшись удобству нового цветохватателя, обнаружил, что еще одна проблема не решена: как же быстро получить доступ к панели цветов? Держать для этого постоянно открытый TextEdit как-то не удобно. Поискал в Сети — подходящего решения не нашел. И, как обычно, на экране запрыгал значок XCode — стал писать свое.

Назвал просто — LittlePicker.

image

Чтобы счастье было полным, color picker можно вызывать по горячей клавише F6. Я добавил его в Startup Items и теперь цвет любой точки экрана доступен сразу же после загрузки Мака. Работает на Mac OS X 10.5 и выше.

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

Скачать можно здесь

Что дальше?


Для любознательных есть потрясающий подробный мануал на английском языке — The Macintosh OS X Color Picker от Робина Гуда Робина Вуда. Расписано буквально все.

UPD: В комментариях высказались в пользу еще одного способа забора цвета с экрана существующего Mac OS X. Приложение называется DigitalColor Meter.
+27
8 марта 2010, 04:53
34

комментарии (24)

+6
Amka #
«Колориметр DigitalColor» разве не входит в стандартную поставку?!
0
mendizabal #
Входит, но вроде из него нельзя скопировать готовый hex. Нужно вручную переписывать.
0
vite7 #
Можно скопировать при помощи меню Color или шортката ⌘+Shift+C
0
mendizabal #
Еще в настройках можно заставить его копировать цвет при клике, только я не понял как это работает.
0
Amka #
Вы ошибаетесь) Ниже уже и ответили.
+4
madhare #
Интересный способ. Спасибо вам за программу. Возник только один вопрос, чем вас не устроила стандартная макосевская программа DigitalColor Meter(она позволяет так же захватить цвет, с любой точки экрана).
–1
vite7 #
DigitalColor Meter входит, но он не позволяет, сохранять образцы цветов, например. Да и цвет там нельзя получить в готовом для копипаста в CSS виде (то есть скопировать то можно, но вот наглядно его не видно, что лично меня несколько коробит).
0
qinetic #
Для Windows на Adobe Air аналоги есть?
0
xalexx #
Искал как-то себе под win. В результате получилась небольшая подборка: 1-я и 2-я часть.
–4
cr0t #
Долго тупил, что же за программа «мэйк» («трудящихся на Маке») и что за веб девелоперы в ней трудятся, наверное, все-таки лучше написать «Mac'e», а то на словах, начинающихся с большой буквы, мозг останавливается и пытается прочитать их по-английски.
+1
pepelsbey #
Лучше бы была возможность вызывать пикер прямо кликом на иконку в менюбаре. А настройки/опции по правой кнопке. А то сейчас приходится делать два клика.

Сам пользуюсь программой Xscope, конкурентов у неё нет. Разве что ColorSchemer, но он направлен скорее на подбор цветовых схем, нежели на выбор существующих цветов.
0
fl00r #
Ребзя, а может есть что-то для убунты похожее? Чтобы в трее хранилось и хоткеем вызывалось
Мозиловский колорпикер так себе вещица.
0
sayber #
Почему именно на Маке? На PC так же мало хорошего софта, которым я кстати так и не пользуюсь.
Т.к. у меня открыт фотошоп постоянно — использую его пипетку для выбора цвета.
+1
lol2Fast4U #
Этот плагин у меня давно, а чтобы вызывать — у меня есть такой вот Applescript:
choose color
запакованный в .app.
0
Kudze #
BTW, для Windows есть PikPick:
0
Kudze #
PicPick, конечно же — опечатался.
0
hazg #
Огромное спасибо. Замечательная штука.
0
curt #
Рекомендую посмотреть на Colors от Matt Patenaude, это простой колорпикер, без цветовых кругов и прочего.
Ну и тот самый app в котором спрятан вызов стандартного колорпикера www.robinwood.com/Catalog/Technical/OtherTuts/MacColorPicker/MacColorPicker.html#colorPickerApp, ну и по этой же ссылке очень интересная статья о колорпикерах на Mac (english required)
НЛО прилетело и опубликовало эту надпись здесь
0
Vizakenjack #
в ТекстМейте при редактировании цсс достаточно нажать shift+option+с (вроде как)

и после выбора он сам вставит хекс-значение в выбранное свойство)
0
superfamous #
Иконку бы покрасивше.
0
vite7 #
Согласен. Иконка была нарисована в Illustrator за 10 минут. В следующей версии я собираюсь сделать другую.
0
egorF #
Ух ты! Hex Color Picker реально полезный. Спасибо!
–1
mrpoma #
Чо за баян на иконке?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.