Такой вопрос наверняка ни раз возникал у веб-дизайнера, разработчика или простого пользователя компьютера. Часто возникает необходимость подобрать цвет используемый на каком-либо объекте, например сайте или просто точки на экране монитора.
Существуют несколько основных способов представления цветов, например когда каждый цвет или оттенок, обозначается HTML кодом и цветовой палитрой RGB в виде #FF7700. Это представление в виде трёх пар шестнадцатеричных цифр, в которых каждая пара отвечает за свой цвет:
первые две цифры — красный цвет, т.е. — R (red)
две в середине — зелёный — G (green)
последние две цифры — синий — B (blue)
Довольно часто используют крадкое представление цвета в виде трех символов #F70, что будет равносильно #FF7700.
Кстати, на веб-ресурсах цвета обычно указываются в стилях CSS.
Давайте перейдем к ответу на главный вопрос — Как узнать цвет пикселя на экране монитора или картинке?
Способов большое множество.
Способ 1. Узнаем цвет в photoshop
Итак, сделаем «снимок экрана» нажатием на клавиатуре клавиши — Print Screen (PrtSc), в том месте, где хотим узнать код нашего цвета. Во время нажатия клавиши система сохранит снимок в буфере обмена. Можно просто скопировать изображение, например из браузера, без PrtSc. Теперь остается только вставить изображение из буфера в фотошоп.
Как настроить цвета на мониторе компьютера
Открываем фотошоп и вставляем изображение (Файл — Создать, Редактирование — Вставить). Ищем на панели инструментов «Пипетка» (Клавиша I), далее щелкаем левой кнопкой мыши в ту область, в котрой хотим «снять» цвет. Все готово! Теперь остается перейти в палитру и узнать код цвета.
Способ 2. Узнаем цвет в Paint
Заходим в Paint — вставляем картинку — используем инструмент «палитра» — переходим в «изменение цветов»:
В нашем случае красный — 252, зеленый — 168, синий — 10, т.е. RGB(252,168,10) или в HEX формате #FCA80A.
Способ 3. Просмотреть код элемента в браузере
Опишу способ для браузера Opera. Выделяем мышкой элемент на сайте и щелкаем по нему правой кнопкой мыши — «Просмотреть код элемента» (Ctrl + Shift + C). Откроется панель с html и css кодом, нужно будет найти что-то подобное «color».
Способ 4. Использование специальных средств или программ.
Существует большое количество специальных программ для снятия цвета, мне нравится очень простая прога под названием «Pixie» с весом около 10-11 Кб. Управление очень простое. Достаточно просто навести мышь в нужную точку на экране монитора и нажать следующие клавиши — Ctrl + Alt + C, в результате чего цветовой код скопируется в буфер обмена.
Как правило, инструмент для определения цвета пикселей, или как его еще называют «пипетка», работает не выходя за рамки окна графического редактора. Чтобы разбить границы и получить возможность узнать цвет любого пикселя на экране, используйте программу-пипетку Just Color Picker. Программа не только определяет цвет в любой области экрана монитора, Just Color Picker это определитель цвета, превосходящий по возможностям штатную пипетку графического редактора и значительно расширяющий функциональные возможности такого инструмента. Эта полезная утилита поможет сэкономить время и станет хорошим помощником веб мастеру, дизайнеру, художнику, разработчику и любому другому, чья сфера деятельности связана с художественно-цифровым творчеством.
Как получить координаты курсора и цвет точки на экране? Screen Loupe
Программа пипетка с ведением истории выбранных цветов
С программой Just Color Picker удобно создавать палитру цветов для использования их в дизайн проекте. Ключевой особенностью приложения, выделяющей программу-пипетку из родственных и подобных программ-пипеток, является ведение утилитой истории выбранных пользователем цветов, которую можно сохранить в файл на диске. Это позволяет создать карту цветов и в дальнейшем выбрать из неё цвета для текста, фона, заливки и подчёркивания отдельных деталей презентации, добиться и достичь гармонии в общей цветовой гамме и в каждом отдельном элементе дизайнерского воплощения.
Когда программа Just Color Picker запущена, приложение сканирует область вокруг указателя мыши и отображает её своем окне. Для более точного «прицеливания» на пиксели в программе можно задать кратность увеличения от 3 до 15 раз. Just Color Picker определяет цвет и умеет кодировать и представлять его пользователю в форматах HTML, RGB, RGB, HEX, HSB/HSV, HSL (255) и HSL(240).
Подведите мышку к цвету, который необходимо узнать, нажмите Alt+X и утилита тут же дополнит список ранее выбранных цветов новым, находящимся под курсором мыши, и отобразит его кодовое обозначение. К каждому присутствующему в журнале истории цвету можно написать комментарий. Выбрав из меню программы дополнительный инструмент «Текст», Вы сможете предварительно увидеть как будет заголовок или абзац с выбранным цветом символов и вариантом шрифта гармонировать и сочетаться с фоном. Just Color Picker наделена простым и понятным интерфейсом, занимает небольшой объем памяти, не требует установки и абсолютно бесплатна.
Скриншоты программы Just Color Picker
HEX / HTML
Цвет в формате HEX — это ни что иное, как шестнадцатеричное представление RGB.
Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 — красный, 22 — зелёный, 33 — синий. Все значения должны быть между 00 и FF.
Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.
RGB
Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.
Значения RGB задаются целым числом от 0 до 255. Например, rgb(0,0,255) отображается как синий, так как синий параметр установлен в его самое высокое значение (255), а остальные установлены в 0.
Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).
Цветовые значения RGB поддерживаются во всех основных браузерах.
RGBA
С недавних пор современные браузеры научились работать с цветовой моделью RGBA — расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.
Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.
HSL
Цветовая модель HSL является представлением модели RGB в цилиндрической системе координат. HSL представляет цвета более интуитивным и понятным для восприятия образом, чем типичное RGB. Модель часто используется в графических приложениях, в палитрах цветов, и для анализа изображений.
HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).
HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.
HSLA
По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.
Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
CMYK
Цветовая модель CMYK часто ассоциируется с цветной печатью, с полиграфией. CMYK (в отличие от RGB) является субтрактивной моделью, это означает что более высокие значения связаны с более тёмными цветами.
Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).
Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).
Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 — жёлтой краски, и 46 — чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).
HSB / HSV
HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.
HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).
XYZ
Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.
LAB
Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.
Очень часто во время работы с сайтами и картинками требуется определить цвет какой-либо точки Вашего экрана монитора .
Например, Вы хотите сделать цвет фона на сайте точно таким же, как цвет голубого неба на фотографии. Или шрифт заголовков сделать такой, как цвет морской волны. Или наоборот, цвет шрифта использовать как фон для создания баннера. Словом, вариантов много. Тщательный подбор цветов очень много значит как в вебдизайне, так и в работе вебмастера.
Определение цвета означает нахождение его кода. Затем код, в зависимости от Ваших целей, можно использовать как в различных графических редакторах, так и непосредственно в коде html.
Чаще всего при этом используется , в котором код можно представить в десятичной и шестнадцатиричной системе.
Очень удобно для определения цвета использовать пипетку . Но, кроме этой программы, есть и другие, с помощью которых можно это делать.
Пипетка программы Adobe Photoshop
Думаю, немногие пользователи этой программы знают, что с помощью нее можно определить цвет не только любой точки на картинке, открытой в редакторе, но и любой точки на экране Вашего монитора.
Делается это очень просто. Открываете , создаете в ней изображение, и, не отпуская левую клавишу мыши, переводите курсор пипетки туда, где находится выбранная Вами точка. Это может быть любая точка за пределами окна программы. По мере движения курсора Вы будете видеть, как изменяется цвет рисования на палитре цветов. После выбора нужной точки отпускаете клавишу мыши.
Кликаете по окошку цвета рисования на палитре цветов, и смотрите код Вашего цвета.
Такой способ определения цвета удобен тем, что не требует установки никаких дополнительных программ, кроме фотошопа, который у большинства пользователей и так уже установлен.
Пост поможет определить цвет онлайн с помощью нескольких сайтов, один просто супер остальные имеют меньший функционал. Способ пригодится тем у кого нет возможности использовать компьютерную программу, например на планшете.
Выбор за sanstv.ru: найдет код пикселя
Отлично, наконец начали делать онлайн сервисы на русском sanstv.ru, и вот адрес , отличительная черта разбивает файл до пикселя. Чтобы начать пользоваться прошу смотреть скриншот.
- Можно вставить файл для определения путем нажатия кнопки PrtScr, при этом сделается снимок с всего браузера, но его видно не будет, чтобы показать на экране нажимаем cntrl+f.
- Либо простым перетаскиванием с вашего компьютера в окно редактора.
- Может делать по фото в хорошем качестве.
- Удобно узнать окрас на сайте, сделал снимок и вставил.
После всех манипуляций увидите свою иллюстрацию и большое увеличение. Чтобы определить код (название) цвета надо навести на необходимый оттенок и посмотреть комбинацию.
- Наводим на необходимое место на экране, большое увеличение.
- Номер в двух формациях rgb и hex, оба используются, но популярнее hex.
Здесь много полезных вещей, например, как верстальщику соединение css. Создан альтруистом, за пользование денег не просит. Переходим к остальным сервисам.
Просто определить цвет онлайн с imagecolorpicker.com
Программы захвата цвета
Программа AAA Color Picker дает вам возможность получить цвет любой точки экрана. Она показывает цвет в разных форматах: .NET, VC, VB, VFP, Java, Delphi, RGB и HSB. Программа пригодится как дизайнеру, так и программисту.
Работать с программой очень легко. Сразу после запуска в квадратном окне в правом верхнем углу показывается увеличенное изображение области вокруг курсора, прямоугольное окно чуть ниже закрашивается в цвет точки экрана, находящейся точно на кончике курсора. Для фиксации точки достаточно нажать комбинацию клавиш Ctrl+1, для продолжения — нажать еще раз.
Соответствующие значения цветов показаны каждый в своей ячейке, при нажатии на кнопку Copy (Копировать) цвет в заданном формате скопируется в буфер обмена Windows. Программа ничуть не мешает вашей работе в Windows, вы можете работать дальше в различных приложениях как ни в чем не бывало. Для того, чтобы цвет был постоянно виден, программа всегда находится поверх других окон.
AAA Color Picker распространяется по принципам Shareware. Скачанная версия программы полностью функциональна в течении десяти дней. Хотя программа распространяется с инсталлятором, для работы устанавливать ее не обязательно, достаточно просто запустить исполняемый файл. Стоимость программы — 15$.
Скачать AAA ColorPicker 1.0 (размер 637Kb): линк
ColorPicker
Программа ColorPicker позволяет выбрать цвет любой точки экрана. Работа программы аналогична описанной программе AAA ColorMaster. ColorPicker выдает цвет в форматах RGB, HTML, Delphi, C++(WinAPI), VB,VF. Выбор цвета фиксируется по нажатию клавиши F2.
В программе также предусмотрена возможность 10-тикратного увеличения изображения вокруг курсора (на самом деле увеличение в два раза меньше, чем указано в программе).
Незарегистрированная версия программы постоянно напоминает о регистрации. Стоимость программы — 20$.
Скачать ColorPicker 2.0.6 (размер 578Kb): линк
PSColorPicker
PSColorPicker — программа предназначена для получения значения цвета в форматах Assembler, C/C++, Basic и HTML.
В этом плане ее нельзя назвать Picker’ом (Сборщик) в полном смысле этого слова, т.к. цвет она берет не с экрана, а из стандартного диалога о выборе цвета Windows.
Зато программа является бесплатной, написана на ассемблере и занимает всего 6 Кбайт. Как охарактеризовали ее авторы: «Самая компактная программа для подбора цвета и получения его кода. Будет очень полезна Web-дизайнерам и программистам.»
Скачать PSColorPicker 1.0 (размер 6Kb): линк
ColorPal
ColorPal — эффективный инструмент для работы с цветом, цветовыми палитрами и схемами. Программа показывает цвет в формате RGB и в шестнадцатиричных значениях, применяемых в HTML. Вы можете выбрать цвет из любой точки экрана через пункт Select color from the screen (Выбрать цвет с экрана) меню Option (Опции), при этом курсор превращается в пипетку
для того, чтобы вы могли выбрать любую точку экрана, а сама программа скрывается, дабы не мешать вашему выбору. Вы также можете выбрать цвет в одной из доступных в программе цветовых палитр или схем, при этом курсор также превращается в пипетку, или через пункт Select color from the picker (Выбрать цвет с экрана) меню Option выбрать его в стандартной палитре Windows с возможностью создания своего цвета.
Всего в программе 8 цветовых палитр (коллекций часто используемых цветов), которые переключаются горячими клавишами от F1 до F8.
Палитра Web colors
Палитра Web hue colors
Палитра Web safe colors
Палитра Windows system
Палитра Macintosh system
Палитра Adobe Photoshop
Палитра VisiBone One
Палитра VisiBone Two
В программе также имеются две цветовые схемы (требуемый или рекомендуемый набор цветов):
Схема Windows XP.
Схема Windows XP Icons.
Для скачивания доступна 30-тидневная Shareware версия программы. Стоимость программы — 10$. Если вы удалите в директории программы файл cur.dat, который является изображением курсора, то при программа не потеряет своей работоспособности, но при выборе цвета курсор меняться не будет.
Скачать ColorPal 1.0 (размер 582Kb): линк
Color Picker
Color Picker — еще одна простая программа для копирования цвета заданной точки экрана. Цвет указан в шестнадцатиричном виде, в котором он применяется в формате HTML.
В небольшом квадратном окошке программы показан цвет точки на кончике курсора, при этом курсор не изменяется. Для копирования значения цвета в буфер обмена нажмите F11.
В программе имеется небольшое контекстное меню. Пункт Top (Сверху) задает положение окна программы поверх других окон. Пункт Color Scroller (Цветовая прокрутка) вызывает стандартную палитру Windows, при выборе в ней цвета его значение в шестнадцатиричном виде автоматически копируется в буфер обмена.
Программа бесплатна и может свободно распространяться без внесения изменений.
Скачать Color Picker 1.9.3 (размер 162Kb): линк
Color Selector
Color Selector — программа для выбора цвета и преобразования цвета из одного формата в другой. Программа рекомендована журналом PC Magazine . Помимо традиционной инструмента для выбора цвета, в программе предусмотрена возможность для работы с палитрой: просмотр, редактирование и создание палитры в различных форматах.
Цвет в программе можно задавать в формате RGB при помощи ползунков или напрямую вводя нужные значения. Для уменьшения/увеличения всех заданных значений предусмотрен ползунок Darker — Lighter (Темнее — Светлее). Заданный цвет показывается в окне Preview (Предварительный просмотр). Установленные значения также отображаются в конвертере форматов.
Для захвата цвета с экрана нажмите на иконку
при этом курсор изменится на «крест»
которым и предстоит выбирать заданную точку. Цвет точки под курсором тут же отображается в окне предварительного просмотра. Если заданный цвет имеется в выбранной в Palette Tool палитре, то в окне предварительного просмотра дополнительно к выбранному цвету показывается иконка
Format Converter (Конвертер форматов) предназначен для перевода цветовых значений из одного формата в другой. В нем можно задавать и получать значения цвета в форматах HTML, OctaL, RGB, HSL, CMY, а также в шестнадцатиричном, десятичном и восьмеричном формате.
При нажатии на кнопку Copy Swatch (Копировать образец) в буфер обмена будет скопирован заданный цвет в графическом виде размером 32×32 пикселя.
Кнопка Color Dialog (Цветовой диалог) служит для вызова стандартного диалога Windows для выбора цвета.
Копирование цвета в заданном формате доступно по нажатию клавиш F2 — F9.
Кнопка Palette Tool служит для вызова встроенной одноименной программы для работы с палитрой, в которой уже имеется четыре готовых палитры:
Палитра Macintosh System.
Палитра Web 125 (Unix).
Палитра Web 216.
Палитра Windows System.
В программе также имеется пустая палитра Custom (Настраиваемая), цвета которой могут быть полностью настроены пользователем, впрочем, можно изменять и представленные выше палитры. Кнопка Set Color (Установить цвет) служит для установки заданного цвета, а кнопка Select Color (Выбрать цвет) — для выбора заданного цвета. Палитру можно сохранить в форматах Paint Shop Pro Palette (*.PAL), Microsoft Palette (*.PAL) и Photoshop Palette (*.ACT).
Программа не требует инсталляции и распространяется бесплатно, однако вы можете отправить дотацию автору в размере 3$. В настоящий момент идет закрытое бета-тестирование Color Selector 3.0 Pre-Release .
Источник: fcenter.ru
Pixie — программа определения цветов на экране
Предлагаем Вашему вниманию маленькую, но очень удобную программу (утилиту) для определения цветов экрана. Для определения цвета любой точки на экране достаточно просто навести курсор мышки на эту точку, а в небольшом окошке появится вся информация о цвете данной точки, которую можно скопировать и затем использовать уже в своих дизайнерских работах. Утилита бесплатна, поэтому можете качать и пользоваться.
1. Как скачать Pixie
После нажатия на кнопку «Загрузить файл» появится окно следующего вида:
На ней можно увидеть две подчеркнутые ссылки: сразу на исполняемый exe-файлик (красным цветом), и на zip-архив (зеленым цветом). Можно скачать любой их вариантов – это одно и тоже. Просто, если у Вас стоит запрет на загрузку исполняемых файлов (в данном случае — exe), то можно скачать программку в архиве (zip). Для распаковки можете воспользоваться архиватором 7-zip, который тоже можно скачать с нашего сайта по следующей ссылке: 7-Zip — архиватор .
2. Как установить Pixie
А устанавливать эту программку не нужно. Если вы скачали в exe-версии, то можно сразу запускать, если в zip-версии, то сначала нужно распаковать, а затем уже запускать exe-файл.
Автор материала: Робин
Источник: sovetologcom.ru