Определение цветов на странице. App Store Колориметр. Знает все цвета

Дата публикации: 05.01.2013

Каждому вебмастеру рано или поздно придется столкнуться с понятием «код цвета». Любой объект сайта, будь это URL ссылка, обычный текст или фон имеет определенный цвет. В реальной жизни все цвета имеют стандартные названия: синий, красный, зеленый и т.д.; в вебе же каждый цвет задается html кодом или названием на английском языке.

Довольно-таки часто вебмастеру для каких-то нужд необходимо определить код цвета . Возникает вопрос: как это сделать? Определить код цвета возможно в специализированных графических программах, примером может служить Photoshop, но подобные программы установлены не у всех. Выход один – использовать специальные программы, созданные именно для того, чтобы определить нужный нам код цвета. Об одной из таких программ я расскажу далее.



ColorPix – специальная программа для определения кода цвета. Данная утилита находится в сети в свободном доступе, весит она меньше одного мегабайта, так что скачка ее займет у вас всего лишь несколько секунд.

ColorPix не требует установки на вашем компьютере, работает сразу же при запуске, определяет цвета одновременно в нескольких популярных форматах: RGB, HEX, HSB и CMYK. С помощью ColorPix можно определить код цвета любого объекта, находящегося на вашем компьютере. Возьмите любую самую колоритную картинку, и наша утилита определит html код любого пикселя на этой картинке.

Пользоваться программой легко и просто, разобраться с ней сможет любой новичок. Управлять утилитой можно как с помощью кнопок на самой панели ColorPix, так и с помощью горячих клавиш.

При нажатии на панели на “+” ColorPix всегда будет находиться поверх всех открытых окон.

При нажатии на панели на значок “лупа” откроется окошко с увеличенным масштабом объекта. Масштаб можно увеличить до 2800%. Лупу включить/отключить можно нажатием клавиш ctrl+m.



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


Чтобы скопировать код цвета – просто кликните по нему мышкой, либо используйте комбинацию ctrl+с (копировать) и ctrl+v (вставить).

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

Выбор за 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 верстке.

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


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

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

Лично у меня потребность узнать шестнадцатеричный код цвета на чужом сайте возникает очень часто. По этой причине пришлось искать более удобное решение этой задачи.

И как оказалось, за данным решением не пришлось далеко ходить. Для тех, кто «юзает» браузер firefox, подойдет плагин

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

А что же делать, если Вам нужно определить цвет не на чьем-то сайте, а, например, на картинке, которая сохранена у Вас на рабочем столе. Здесь плагин ColorZilla будет бессилен, разве что взять и открыть картинку через браузер, что тоже не всегда удобно. А если Вы хотите определить цвет какого-либо понравившегося вам апликейшен а, установленного на вашей рабочей машине, что тогда? Опять делать скриншот и засовывать его в фотошоп? Нет!

В таком случаем нам поможет утилитка Pixie , которую Вы можете скачать на официальной странице утилиты . С помощью Pixie Вы легко узнаете код цвета в шестнадцатеричном формате, в RGB и даже в CMYK в любом месте на Вашем мониторе.

Теперь коснемся определения цветовой схемы любого из сайта. Опять же понятно, что вручную выдирать шестнадцатеричное значение используемых цветов на сайте из СSS или HTML-кода страницы, не очень приятное занятие. Также как и с помощью плагина ColorZilla бегать пипеткой по сайту и копировать цвета. К счастью для меня, я на серфил в Интернете online-сервис cssprism .

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

На этом все. Было бы интересно узнать, какими техниками, утилитами и сервисами для определения цвета на сайте, его цветовой схемы пользуетесь Вы?

Вид ПО : Определение цвета
Разработчик/Издатель : Vlad Polyanskiy
Версия : 1.0
iPhone + iPad : 33 рубля [Скачать из App Store ]

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

Помните, как искали обои определённого цвета? Или предмет одежды под специфический дресскод? А может, вам нужна деталь интерьера, которая точно вписалась бы в цвета мебели или разбавила акценты? Решить все эти и другие мелкие бытовые задачи поможет новое отечественное приложение Колориметр для iPhone.

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

Колориметр действует просто. Запускаете программу, делаете фото и водите по нему пальцем. Виртуальное увеличительное стекло анализирует цвет в точке касания и выдаёт его культурное название.

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

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

Иногда даже малейшее отклонение в цвете может стать критичным. Например, при выборе краски. Тут уже недостаточно одного названия или изображения. Нужны стандарты, цифры. Хорошо, что в Колориметре всё это тоже есть. Нажав на название цвета, вы откроете его подробное описание . Здесь указаны параметры оттенка в самых популярных цветовых моделях – RGB (цифровое изображение) и CMYK , для печати.

Если же речь идет не о жидких красках и цветах, а о виртуальных, дизайнеры оценят и два дополнительных параметра – HSB (тон, насыщенность и яркость) и HEX -код цвета для веб-сайтов. Помимо этого, приложение показывает три самых подходящих цвета в известной системе Pantone , зная которые, вам будет гораздо проще вести диалог с производителем или продавцом мебели и декора.

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

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

Свежие горячие яблоки:

Здравствуйте уважаемые читатели блога Spectr -rv .ru . Сегодня я хочу рассказать о маленькой и бесплатной, но, в то же время, очень полезной программке - это программа для определения цвета Pixie , позволяющая моментально определить код цвета любого участка изображения на экране вашего монитора.

Хотя программа Pixie (Пикси) разработана для веб-дизайнеров и художников-графиков, она с успехом используется как веб-мастерами, так и простыми блоггерами.

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

Программа Пикси занимает очень мало места – всего 12 КБ, и не требует установки. Для начала работы с ней достаточно запустить файл, скачанный с сайта разработчика .

Устройство программы Pixie и работа с ней

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


Код цвета выдается сразу в нескольких форматах: HEX , HTML , RGB , CMYK и HSV , из которых нас интересует, в первую очередь, HTML . Для определения кода цвета нужного элемента изображения, необходимо просто навести на него указатель мыши.

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

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



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


Дополнительные возможности программы Pixie

Дополнительные функции Пикси включаются при нажатии следующих сочетаний клавиш:

Ctrl + Alt + C - Копирование значения HTML отображаемого цвета, в буфер обмена.

Ctrl + Alt + X - Включение смесителя цветов, позволяющего создавать новые цвета и сохранять их на будущее.


Перемещая прицел (1), здесь можно выбрать нужный цвет, а с помощью линейки (2),установить его яркость. Чтобы скопировать код HTML созданного цвета (3) в буфер обмена, нажмите кнопку «ОК ».

Для сохранения подобранного цвета, нажмите кнопку «Добавить в набор », при этом созданный вами цвет появится в области «Дополнительные цвета ». Можно, также, ввести с клавиатуры любой код цвета в поле « HTML », а затем добавить его в «Дополнительные цвета ».

Ctrl + Alt + Z - Работа со сложными изображениями. Открывается статический снимок зоны под курсором, размером 32 x 32 пикселя, с увеличением 1:7, то есть появляется возможность определить цвет буквально каждого пикселя в выделенной зоне.



Вот такими замечательными возможностями обладает программа для определения цвета Pixie . Я настоятельно рекомендую скачать себе эту утилиту и проверить ее в работе. Уверен - она вам понравится.А у меня на сегодня все.

С уважением, Владимир ().

Поделиться: