Приветствую всех читателей блога scriptcoding.ru. Данная статья будет объемной и познавательной, поскольку в ней мы рассмотрим несколько связанных между собой тем. Так что. Запасайтесь чаем и печеньем, и в путь….
Цветовые схемы RGB, CMYK, Lab и HSB
Сложно представить лучшего художника, чем природа. Человек, со всеми своими технологиями является лишь плагиатором, который пытается воспроизвести ту красоту и разнообразие цветов, которыми природа радует нас каждый день. Однако,за всю историю, человечество увидело, что невозможно создать единую схему, или набор правил, для воспроизведения того или иного цвета. Это и неудивительно, так как разнообразие цветов и оттенков столь огромно, что даже ни одно количество терабайт не сможет их запомнить, или угадать. Дело в том, что наш разум по своей природе примитивный, так, мы по-разному воспринимаем цвет объекта в зависимости от освещения, кроме того – наш глаз просто физически не в силах отличить все оттенки многолепия природы.
Однако, может возникнуть вопрос: но как же, ведь есть такие цветовые схемы как RGBили CMYK, кроме того, глянцевые журналы и дорогие мониторы тоже могут порадовать наш глаз, значит, мы все же разгадали загадку цвета, или нет? Возможно, а возможно и нет. Еще из школьной скамьи известно, что в природе есть объекты, которые излучают свет – Солнце, звезды, галактики, элементы освещения, и объекты, которые видны только за счет способности отражать световые лучи – Луна, Земля, бумажный лист, дома и так далее. Исходя из этого, светлые умы человечества решили придумать две схемы для представления цвета:
- Аддитивные схемы – тут все основывается на световых лучах, освещающих белый объект. Так, если листок бумаги белого цвета осветить зеленым цветом, то он представится нам зеленым, если осветить красным цветом – то мы подумаем, что лист бумаги красного цвета.
- Субтрактивные схемы – данный тип схем подходит для красок. Смешивая тот или иной набор красок в заданном количестве, мы получаем новый цвет.
Цветовая схема RGB
Цветовая схема RGBявляется аддитивной, так как применяется в электронных устройства вывода данных, таких как монитор, телевизор и так далее. В ее составе лежат три цвета: красный (Red), зелёный (Green) и синий (Blue). Может возникнуть логический вопрос: а почему именно эти три цвета? Дело в том, что видимый спектр света при попадании на сетчатку человеческого глаза, происходит обработку нашим мозгом, который, в свою очередь, разбивает видимый спектр на три части: зеленую, красную и синюю, и уже основываясь на эти цвета, происходит вычитание общей информации о цвете. Поэтому, условно можно сказать, что цветовая схема RGB отражает модель, по которой наш глаз воспринимает окружающий мир.
Цветовая схема CMYK
Полагаю, многие знают, что цветовая схема CMYKприменяется в полиграфии, однако, своей жизнью она обязана такой субтрактивной цветовой схеме как CMY, в основе которой лежат такие цвета как бирюзовый (Cyan), пурпурный (Magenta) и жёлтый (Yellow). Схема по своей природе идеальна, если бы не одно маленькое но. Дело в том, что в идеальном случае при смешивании данных цветов, должен получиться черный цвет, но практика показывает, что на выходе получается некий темно-бурый оттенок, который лишь отдаленно напоминает черный. Исходя из этого, к схеме добавили черный цвет — буква K (blacK),обозначающая черный цвет.
Как и в случае с цветовой схемой RGB, может возникнуть логический вопрос: а почему именно эти цвета? Мы знаем, что бумага, в отличии от экранов или мониторов, не способна излучить свет, она может только отразить световые лучи. В зависимости от количества поглощенной и отраженной краски, мы можем видеть различные цвета. Исходя из этого, решили, что намного удобнее рассчитывать, какое количество света было отражено от заданной поверхности, чем считать, сколько света поглотилось. В результате,если мы вычтем три первичных цвета (RGB) из белого, то мы получим дополнительные три цвета, на которых основана цветовая схема CMY.
Цветовая схема Lab
Исходя из вышесказанного, мы видим, что цветовая схема RGB ориентирована на свойства излучаемого света, а CMYK – на свойства поглощаемого света. Однако, стоит отметить, что цветовые диапазоны в обеих цветовых схем не совпадают. Так, RGB позволяет прекрасно воспроизводить цвета в диапазоне от синего до зеленого, и несколько хуже — оттенки желтого и оранжевого, а в модель CMYK – скудна на многие оттенки. Исходя из этого и была разработана модель Lab, которая активно используется в компьютерной графике.
В основе модели Lab лежат три параметра: L— яркость, а— цвета от темно-зеленого через серый до ярко-розового и b — цвета от светло-синего через серый до ярко-желтого. По своей природе цветовая модель Lab независима, например, Фотошоп при переходе от RGB к CMYK использует Lab как промежуточный этап.
Цветовая схема HSB или HSV
По своей природе, цветовая схема HSBявляется практически той же RGB. Для определения цвета в схеме HSB используются три параметра:
- Hue — цветовой тон или оттенок, например, зеленый, красный или сине-голубой. Тут значение задается в градусах от 0 до 360.
- Saturation – насыщенность, значение от 0 до 100, фактически, процент добавленной к цвету белой краски.
- Value (значение цвета) или Brightness — яркость. Значение определяется в процентах от 0 до 100.
Стоит обратить внимание на то, что цветовая схема HSBне соответствует тем цветам, которые воспринимает человеческий глаз. Человеческий орган зрения воспринимает цвета, как такие, что имеют разное значение яркости. Однако, для примера, спектральный синий имеет меньшую яркость, чем спектральный зеленый. А модель HSB основывается на том, чтовсе цвета основного спектра обладают 100%-й яркостью, хотя в реальности это не так.
Онлайн сервисы для работы с цветовыми схемами
Kuler — kuler.adobe.com
Данный онлайн сервис от компании Adobe уже давно считается лучшим помощником профессионального веб-дизайнера. После регистрации появляется возможность использовать цветовые схемы, созданные другими пользователями, сохранять собственные цветовые схемы и многое другое. При желании можно выбрать тип цветовой схемы — RGB, CMYK, LAB или HSV.
Важно отметить, что вы можете загрузить собственное изображение, на основе которого будет создана цветовая схема, можно использовать такие графические форматы как TIFF, JPEG, GIF, PNG и BMP. Кроме того, Kuler поддерживает экспорт палитры в формат *.ASE, это позволяет импортировать созданные цвета в графический редактор Фотошоп через палитру SWATCHES. Кроме того, с Кулером можно взаимодействовать через меню Фотошоп: Окна /Расширения /Kuler.
Color Palette Generator — www.degraeve.com/color-palette/ и ColorHunter — www.colorhunter.com
Данный сервис по своей природе очень простой, сразу после перехода, у вас будет возможность создать цветовую схему для любого понравившегося изображения. Для этого справа есть окно «URL of image», вставляем туда ссылку на рисунок и нажимаем на кнопку «Color-Palette-ify!» В итоге, слева мы увидим цветовую схему для заданного рисунка. Все гениально просто.
На этом же сервисе есть ссылка на ColorHunter, перейдя по ней, мы попадаем на похожий сервис для составления схем, но тут уже можно не только указывать URL адрес к картинке, но и загрузить собственный рисунок, подде5рживаемые форматы – jpg, png и gif. Обратите внимание, что внизу под строкой ввода есть список уже готовых цветовых схем, которые созданы другими пользователями сервиса.
Contrast-A — dasplankton.de/ContrastA/
При переходе на сервис, на первый взгляд все кажется непонятным, но это не так… Как написано на главной странице: Приложение позволяет пользователям экспериментировать с цветовыми комбинациями, изучить их в аспекте принципов доступности и создавать собственные цветовые палитры. Contrast-A проверяет сочетания цветов для достаточной контрастности и показывает информацию в соответствии с WCAG 2.0 (Коэффициент яркости), а также в соответствии со старыми правилами WCAG 1.0 (Разница в яркости и цвете).
По сути, все сводится к тому, что мы можем выбрать два цвета, и сразу увидеть, как они между собой сосчитаются.
Colorotate—www.colorotate.org
Colorotate чем-то похож на Kuler, о котором мы упомянули выше, тут тоже можно загружать собственные изображения или выбирать готовые цветовые схемы. Однако тут, генератор цветовых схем представлен не в виде цветового колеса, а в виде трехмерного конуса. На главной странице можно скачать приложение для мобильных устройств, кроме того, используя плагин ColoRotate, можно работать с цветовой схемой непосредственно в Фотошоп и Fireworks.
Colour Lovers — www.colourlovers.com
В отличии от предыдущих сервисов, тут можно создавать не только цветовые схемы, или использовать уже созданные, но и создавать различные шаблоны. Ресурс постоянно обновляется – всегда свежие новости, обзоры, есть сообщества и группы. Естественно, для использования всех функций, придется зарегистрироваться.
Color Scheme Designer — colorschemedesigner.com
Тут все гениально просто: вы выбираете нужный тип цветовой схемы — моно, комплиментарная, триада, тетрада или аналоговая. Далее, выбираем нужные цвета, удобство заключается в том, что тут сразу можно посмотреть, как будет выглядеть страница сайта с заданной цветовой палитрой.
ColorSchemer Gallery — www.colorschemer.com/schemes/
Название говорит само за себя – галерея цветовых схем. Кроме выбора готовых схем, созданных пользователями сервиса, можно скачать различные приложения для работы с цветом.
Color Spire — www.colorspire.com
Очень простой сервис. Вам нужно только выбрать заданный цвет, а сервис автоматически предложит цветовую схему. Справа будет находиться небольшой пример, содержащий шапку, подвал, боковую панель и основу макета сайта с выбранными цветами.
ColorExplorer — www.colorexplorer.com
Тут содержится не один, а сразу несколько инструментов для работы с цветом. Кроме того, можно просмотреть готовую библиотеку цветов. Функций у сервиса много, так что есть что изучать.
Sphere — mudcu.be/sphere/
Очень интересный сервис, слева находится цветовой круг, на котором находятся шесть связанных между собой точек, точки можно отдалять от центра круга или приближать к центру. Справа находятся шесть ползунков, по три на каждую цветовую схему – RGB или HSL. По сути, достаточно выбрать один цвет, а все остальные будут задаваться автоматически.
Pictaculous — www.pictaculous.com и ColourGrab — colourgrab.com
Оба сервиса позволяют создать цветовую схему на основе заданного изображения – в одном случае вы задаете ссылку на рисунок в сети, а в другом – загружаете с компьютера.
Куда пропал колдунщик цветов Яндекса
Многие пользователи, которые ищут информацию в поисковой системе яндекс, привыкли, что довольно часто помимо стандартной выдачи с сайтами, нам могут, в зависимости от поискового запроса, выводиться картинки, карты, калькулятор и так далее. Такие дополнительные элементы в Яндекс называются колдунщиками. Что бы не затягивать материал, я коротко опишу, как происходит вызов нужного колдунщика…
Помимо текстовой информации, содержащейся на сайтах, человек может искать и то, что по определению просто нет смысла описывать специально в статье. Например:
- Человек ищет информацию о Евровидении, которое недавно прошло – в таком случае пользователю есть смысл показать последние новости.
- Пользователь вводит в строке поиска «число пи» – скорее всего он хочет увидеть числовое значение.
- В строке поиска вводится слово серобуромалиновый – тут логично предложить код цвета
И таких примеров много…
По сути, вывод результатов по вебу и вывод информации из сервисов Яндекса, это так называемый параллельный поиск, а результаты, которые показываются вместе со стандартной выдачей – колдунщиками. Многие заметили, что колдунщиков может появиться несколько. Конечно, внутренние алгоритмы поиска проверяют, насколько запрос популярен в плане того, что бы выводить для него кроме поисковой выдачи еще и нужный колдунщик.
Однако, в последнее время я заметил, что колдунщик Яндекс цветов пропал из выдачи. Данный колдунщик появляется, когда мы вводим название цвета, его код, ну или просто фразу Цвет Яндекса – вариантов много. Побродив по просторам интернета я узнал, что не только у меня пропали из выдачи Яндекс цвета, как оказалось, Яндекс любит проводить различный эксперименты, для которых выборочно выбирает пользователей, скорое всего, я тоже попал под раздачу.>
Что бы убедится, что яндекс цвета полностью не пропали, я зашел через анонимайзер на Яндекс и ввел фразу Яндекс цвета, и… удача, колдунщик цветов появился. Давайте разберемся, что из себя представляет колдунщик Яндекс цветов.
Смотрите, суть сервиса заключается в том, что бы показать, как выглядит заданный цвет, и какой у него код. Слева находится небольшой блок, который состоит из цветных полос с названиями цвета, рядом с блоком находятся стрелки, которые позволяют делать прокрутку в заданном направлении. Весь юмор заключается в том, что можно увидеть цвет не только для стандартного набора вида красный, зеленый, но и для:
- Серобуромалиновый
- Цвет блошиного брюшка
- Медвежье ушко
- Морская пена
Справа находится кольцо для выбора цвета, рядом с ним можно ввести вручную нужный код цвета. Поддерживаются две цветовые схемы: RGB и HSV.
Игры с цветом, или обман зрения
На этом рисунке, на самом деле, нет оттенков розового и красного цветов, в этом легко убедиться, если загрузить изображение в графический редактор, например, Фотошоп, и увеличить нужную область с якобы красными цветами до максимума.
Иллюзия шахматной доски – в данных примерах, точки А и В содержат одинаковый цвет. Это легко проверить в любом графическом редакторе. Аналогично, можно увидеть обман, если смотреть на изображение под определенным углом.
Иллюзия с градиентом – данный тип иллюзии легко создать самому, достаточно открыть Фотошоп и создать два слоя. На переднем слое рисуем две или одну фигуру заданного цвета, а на заднем фоне используем заливку в виде градиента, сам градиент должен содержать два цвета – один светлее, другой темнее фигуры, которая на переднем плане.
Во всех случаях фигуры на переднем плане одинакового цвета.
В следующих примерах иллюзия с цветами тоже связана с задним планом, точнее с областью, на которой находится цветовая область.
Тут все спиральки одного цвета.
Все кубики одного цвета
Оба круга одного цвета.
Квадратики в центре на обоих картинках одного цвета.
Тут как и в предыдущем примере области в центре одного цвета.
Может показаться, что на рисунке чередуются цветные полосы розового, оранжевого, синего и зеленые полосы, на самом деле, синий и зеленый это один и тот же цвет. Если присмотреться, то будет видно, что «сине-зеленые» полосы идут через весь рисунок, не меняя своего цвета.
Тут тоже действует эффект заднего плана – шахматы вверху и внизу одного цвета.
Данный пример мне больше всего нравится, поскольку, тут, как говорится, все ясно – поверхность А и поверхность В разного цвета, но это иллюзия! Обман легко раскрыть, если разделить рисунок на две части по видимой границе, и просто переместить нижнюю часть наверх или наоборот.
В данном примере квадраты А, В и С одно цвета.
Все серые прямоугольники одного цвета.
Из-за разного окружающего цвета, кажется будто квадратики содержат различные розовые тона, но на самом деле розовый цвет у всех квадратиков одинаковый.