Любой графический объект можно считать состоящим из цветных точек или из цветных линий, который в этом случае следует рассматривать как элементарные объекты. Рассмотрим для определенности экранную цветную точку (пиксель). У пикселя 3 основных свойства – координата по высоте, координата по ширине и цвет. Первые 2 свойства без труда представляются в виде чисел. А как быть с цветом? Как присвоить всем возможным оттенкам различные коды, учитывая, что человеческий глаз различает несколько миллионов оттенков?
Выход из этого положения дает одно замечательное свойство человеческого глаза – любой цвет на сетчатке глаза раскладывается в суперпозицию 3-х базовых цветов — красного, зеленого и синего и в таком виде поступает в мозг. Поэтому человек не различает собственно оттенок цвета (свет определенной длины волны) и тот же оттенок, составленный из базовых цветов (смешение 3-х длин волн с определенными интенсивностями). В связи с этим любому устройству, выводящему изображения, будь то монитор, проектор или принтер достаточно работать только с 3-мя базовыми цветами, меняя оттенки изменением соотношения интенсивностей этих цветов. Соответственно и задать цвет можно в виде 3-х чисел – значений интенсивностей базовых цветов. Такой способ задания цвета используется в RGB-кодировке – основной кодировке цвета.
Согласно стандарту RGB (Red, Green, Blue, т.е. Красный, Зеленый, Синий) для записи значения цвета отводится 3 байта (24 бита) – в первый байт записывается интенсивность красного, во второй байт интенсивность зеленого, в третий байт – интенсивность синего цвета. Т.к. в один байт можно записать любое значение от 0 до 255 (т.е. одно из 256 значений), то каждый базовый цвет может иметь 256 градаций интенсивности. Соответственно, в рамках RGB-стандарта возможно 256 256256 = 16777216 (более 16 млн.) различных значений оттенков. Это перекрывает возможности любого человеческого глаза.
Записывать RGB-код цвета принято в виде 6-значного шестнадцатеричного числа, состоящего из 3-х двузначных шестнадцатеричных чисел, первое из которых обозначает интенсивность красного, второе интенсивность зеленого, третье интенсивность синего (т.е. в виде #rrggbb). Например, #FF0000 означает красный цвет, #00FF00 –зеленый, #0000FF –синий, #000000 –черный (отсутствие цвета), #FFFFFF белый (смешение максимальных интенсивностей базовых цветов), #808080 – серый (смешение половинных интенсивностей всех базовых цветов). При интерпретации значения RGB-кода удобно представить, что источником цвета является светильник, состоящий из 3-х лампочек – красной, зеленой и синей, причем яркость каждой лампочки определяется значением соответствующего двузначного шестнадцатеричного числа (00 – лампочка выключена, FF-лампочка включена с максимальной яркостью).
Кроме RGB используется еще одна общепринятая кодировка цветов CMYK.
Кодировка CMYK (Cyan -голубой, Magenta -розовый, Yellow -желтый и blacK -черный) является дополнительной к RGB. Коды базовых CMYK-цветов записываются в RGB как
Cyan = #00FFFF,
Magenta = #FF00FF,
Yellow = #FFFF00,
Black = #000000.
Таким образом, Cyan + Red = Magenta + Green = Yellow + Blue = #FFFFFF (белый цвет).
CMYK кодировка полностью эквивалентна RGB (дает столько же различных оттенков), но для ее реализации необходимо 4 байта (32 бита). Лишний байт необходим для дополнительного черного цвета, который не создает новых оттенков, а только меняет общую интенсивность цвета. Необходимость в дополнительном черном цвете возникает из-за невозможности получить черный смешением голубого, розового и желтого. Хотя теоретически такой результат должен получаться, на практике, при смешивании красок или при смешивании света точечных источников чистого черного цвета (т.е. полного отсутствия цвета) не получается.
Кодировка RGB позволяет наилучшим образом задать цветную точку на черном фоне, например изображение на экране монитора (при отсутствии какого-либо изображения монитор представляет собой черный экран). Кодировка CMYK более удобна при представлении изображения на белом фоне (например, изображения и текста на бумаге). Поэтому для любых печатающих устройств более удобна кодировка CMYK. Идея CMYK использовалась в полиграфии задолго до появления компьютеров при печати цветных изображений с помощью набора из 4-х базовых красок.
studfiles.net
Термин цветовое кодирование известен уже очень и очень давно тем, кто хоть немного общается с дизайном. По факту цветовое кодирование — это один из видов представление информации, основанный на сопоставлении одного цвета одному или нескольким предметам, терминам или формам. Цветовое кодирование применяется тогда, когда представляемой информации оказывается слишком много, а ее еще нужно показать на таймлайне (изменение во времени) или же стандартные средства обозначения предмета (символьно) недействительны. Именно в таких случаях применяется цветовое кодирование — чтобы глаз мог без труда различать только необходимую информацию, которая интересует пользователя в конкретный момент.
История
Самые первые эксперименты по цветовому кодированию были проведены при составлении старинных топографических карт, где оттенки зеленого означали различные высоты равнин, а оттенки коричневого — горы.
У большинства в школе, наверняка, была география и все прекрасно понимают о чем идет речь 🙂
В своей книге Envisioning Information Э. Тафти приводит пример карты на которой можно отчетливо увидеть все дома, промышленные зоны, важные постройки, поля, луга, леса и воду. Все это создано при помощи правильно подобранной цветовой гаммы. В этом примере автор не использовал отдельный цвет для обозначения дорог: именно поэтому карта сохранила свою легкость в прочтении, т.к. “дороги” сформированы за счет плотно стоящих рядом друг с другом зданий (см. правило 1+1=3).
Применение в инфографике
Естественно, после карт цветовое кодирование начало применяться во многих других областях, где требовалось как-то обозначать предметы или выделять важную информацию. Одной из активных областей применения цветового кодирования — инфографика, но не во всех примерах инфографики можно его встретить. Разберем несколько вариантов применения цветового кодирования.
Например, рейтинг штатов по населению (по данным переписи населения):
Этот пример рассказывает нам о рейтинге каждого из штатов США по данным переписи населения с 1790 года, когда было всего 13 штатов и далее каждые 10 лет до 1900 года, когда штатов стало уже 52. Каждый штат имеет свою отличительную окраску (не говорю цвет, потому как тут применяется двух- и трехцветное кодирование). Кроме того положение каждого штата в рейтинге можно проследить по соединительным линиям, что упрощает движение глаза человека, который хочет посмотреть, например, как изменилось положение штата Мэриленд с 1790 года по 1860.
Другой пример, более современный, это статистика гонки Формула 1:
Каждому из гонщиков присвоен свой цвет, а линия показывает положение гонщика в общем списке на каждом кругу. Гонщиков не так уж и много, поэтому ничего сложного в том, чтобы проследить за их положением (показана только первая восьмерка победителей, поэтому линий и мало).
Но вот другой пример, который также использует цветовое кодирование для представления рейтинга женских сборных по гребле в Кембриджском Университете за 12 сезонов в каждом из которых отображено по 4 дня. Всего статистика включает в себя данные по более чем 66-ти командам.
В общей сумме тут более 800 спарклайнов(статья #1 и статья #2 про спарклайны), что немного усложняет задачу быстрого и правильного понимания информации. Однако, положение опять спасает цветовое кодирование. На картинке в книге все вообще видно прекрасно, даже не водя пальцем по линиям. На вылолженном же варианте цвет немного искажен из-за сканирования, поэтому качество не фонтан, да и цвета почти все одинаковые, но разобрать некоторые команды и их положение вполне реально.
Еще один пример (из последних), где уместно применение цветового кодирования — визовая статистика.
Тут автор как нельзя лучше обозначил цветом те страны, которые выдают шенгенские визы. Кроме того по этой визуализации мы можем узнать, что Литва и Словакия только после 2008 года начали выдавать шенгенские визы, а до этого выдавали только внутренние.
Еще одним почти удачным примером может послужить интерактивная карта населения стран “прошлое, настоящее, будущее”.
Основная проблема — это цвет. Сочетания ярко-красного и ярко-синего могут спокойно делать только ученые или исследователи, поэтому я такие сочетания и такие цвета так и назваю — “научные цвета” 🙂 Этот термин как нельзя точно определяет использованные в этом примере цвета.
нако, если не обращать внимания на кислотные красные точки, а сосредоточиться именно на представлении информации, то можно заметить неплохую картину, которую создал автор: крупный, привлекающий внимание заголовок, из которого сразу же становится понятно назначение цветов на карте. Такие заголовки выполняют сразу несколько функций: непосредственно сам заголовок + легенда, а т.к. кроме цветов на этой карте больше ничего непонятного быть не может, то решение очень удачное.
Основные правила использования
Основные правила очень просты:
- использовать цветовое кодирование когда другие виды кодирования не получается использовать или из-за них ваша работа становится слишком сложной;
- не использовать яркие, кислотные цвета, которые будут резать глаз при просмотре;
- использовать именно цвета, а не их названия:
- стараться не использовать более 4-х различных цветов (оттенки цветов предпочтительнее использовать, вместо добавления новых цветов);
Будущее цветового кодирования
В том, что этот термин и его применение никогда никуда не денутся (в обозримом будущем) я точно уверен. Сейчас вокруг появляется все большая и большая необходимость визуализировать большие массивы данных на небольших носителях информации: газетные страницы, буклеты и тд… Чем больше информации, тем ее сложнее воспринимать, структурировать и вообще понимать. Именно поэтому мы будем все чаще и чаще сталкиваться с различными проявляниями цветового кодирования
infogra.ru
Цветовая гамма в html
В html цвет может быть задан в нескольких форматах:
1. В виде шестнадцатеричного значения – используются код, заданный в шестнадцатеричной системе исчисления. Такие коды цветов в html состоят из трех пар шестнадцатеричных чисел. Каждая пара отвечает за насыщенность оттенка своим основным цветом:
- Первая числовая пара – отвечает за красный цвет;
- Вторая пара – за содержание зеленого цвета;
- Последняя – за содержание синего цвета.
В начале кода (перед цифрами) ставится решетка. Так обозначается шестнадцатеричный цветовой код. Кроме чисел от 1 до 9 в этой системе исчисления используются буквы латинского алфавита (A, B, C, D, E, F).
Например, код белого цвета в html будет иметь вид #FFFFFF:
2. Ключевым словом – сейчас html поддерживает около 147 ключевых слов. Но не все из этих слов являются уникальными. Некоторые из них ссылаются на один и тот же цветовой оттенок.
Серый цвет обозначается двумя ключевыми словами: grey и gray. Их шестнадцатеричный код (HEX) задается одним и тем же значением #808080.
Пример:
3. В формате RGB – эта кодировка цветов в html основана на использовании трех значений, задаваемых в диапазоне от 0 до 255. Каждое из них определяет насыщенность оттенка одним из основных цветов:
- R – красный (red);
- G – зеленый (green);
- B – синий (blue).
Номер цвета в формате RGB записывается в таком виде: rgb(0, 210, 100).
Пример:
4. В формате RGBA – он представляет собой усовершенствованный формат RGB, где четвертым значением задается прозрачность цвета в виде десятичной дроби от 0 до 1.
Пример использования:
Таблицы цветов html и генераторы цвета
При таком большом разбросе форматов установки цвета легко запутаться. Поэтому была придумана специальная таблица цветов. В ней к 147 ключевым названиям цветовых оттенков приведены коды соответствия во всех основных стандартах представления цвета. Дополнительно каждое поле снабжено планкой для визуального подбора цвета. Одна из таких таблиц представлена на сайте colorscheme.ru:
Но даже с помощью такой структуризации соответствия подбор нужного оттенка может оказаться затруднительным. Да и не факт, что в таблице кодов цветов найдется нужный.
Чтобы обойти эту преграду и максимально упростить подбор нужного оттенка, были разработаны интерактивные веб-сервисы. Их пользовательский интерфейс может несколько разниться между собой.
На сайте html-color-codes.info генератор цветов имеет такой вид:
А в рамках сервиса color-picker.appsmaster.co этот инструмент реализован немного иначе:
Но генератор цветов доступен не только на специализированных сайтах. Подобным инструментом снабжены почти все графические редакторы. Например, Photoshop:
Техника безопасности при работе с цветом
А было это давно, еще в эпоху видеокарт, поддерживающих всего 256 цветов. В те далекие времена операционные системы могли без искажений отображать лишь определенное количество восьми битных оттенков.
Тогда была выведена великая таблица безопасных цветов. В ней указывалось 216 оттенков, которые могли быть отображены без искажения в любом из браузеров того времени. И по сей день эта «великая рукопись» еще доступна на некоторых ресурсах:
В наше время все изменилось. Поэтому все правила техники безопасности при работе с цветом в html полностью аннулируются. Ведь современное компьютерное железо поддерживает более 16 миллионов различных оттенков. И 216 безопасных цветов канули в лету.
Основы цветовой гармонии
Природным гармоничным чувством вкуса наделены далеко не все из нас. Поэтому правильный подбор цвета может стать настоящим испытанием. Но, хвала науке, даже цветовую гармонию ей удалось описать в виде нескольких схем. Все они основаны на использовании цветового круга. Схемы гармоничного подбора цветов в html:
- Схема параллельных цветов – когда оба оттенка в цветовом кругу находятся параллельно;
- Триадная схема – в основе всех углов треугольника лежит один из цветов;
- Монохроматическая – когда подбираются несколько близких оттенков одного цвета;
- Аналоговая – более расширенная версия монохроматической схемы. При этом оттенки одного цвета находятся на определенном удалении.
Реализация всех этих схем хорошо представлена в рамках сервиса paletton.com. Он позволяет без труда осуществить гармоничный подбор цвета.
Но не стоит воспринимать эти схемы как эталоны цветовой гармонии. В этом деле никто не отменял творческого подхода. И может оказаться так, что именно вы откроете новую схему идеального цвета.
www.internet-technologies.ru