Зная Таблицу безопасных цветов для сайтов, хотелось бы иметь под рукой какой-нибудь инструмент, который помог бы при создании сайтов выбирать правильные сочетания цветов на экране монитора, особенно, сочетание цвета текста и фона.

И такой инструмент есть. Это бесплатный Генератор Цветовых Схем.

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

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

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

Выбор базового цвета

Базовый цвет может быть установлен несколькими способами. Данный генератор работает, в первую очередь, с цветовым колесом, на котором цвета определены в соответствии с моделью HUE, то есть в зависимости от угла на колесе. На этом цветовом колесе теплые цвета (от фиолетового до желтого) и холодные цвета (от желто-зеленого до фиолетового) разнесены на противоположные стороны.

Вы можете выбрать один из элементов (цветов) этого колеса, нажав на полоску его цвета. Основным цветам (красный, желтый, синий) соответствуют углы 0°, 120° и 240°, вторичным цветам (оранжевый, зеленый, фиолетовый) соответствуют углы между основными цветами, то есть 60°, 180° и 300°. Все третичные цвета находятся между ними. Кроме того, там есть еще цветовые полоски с чуть меньшей длиной. Это переходные цвета. Они отстоят от основных, вторичных и третичных цветов на углы в 15°. При нажатии мышкой на любой из этих цветов, Вы установите этот цвет в качестве основного цвета.

Еще можно заметить маленькую точечку внутри цветового кольца прямо на шкале, проградуированной в градусах. Щелкая мышкой по этой шкале, можно выбирать основной цвет более плавно. Меняя положение этой точки, можно выбирать оттенок того цвета, сектор которого находится в пределах того угла, где находится точка. Причем, оттенки с помощью этой точки выбираются без изменения яркости и/или насыщенности от того цвета, который находится в секторе цветового круга. Если после "тонкой" настройки, с помощью точки, Вы снова кликните мышкой по цветному сектору, то вся "тонкая" настройка пропадает и основной цвет устанавливается по умолчанию.

Тут сразу нужно заметить следующее. Этот генератор цветовых схем не использует стандартные модели HSV и HSB. Цветовое колесо, используемое здесь, отличается от RGB-спектра, используемого на экранах мониторов компьютеров. Поэтому некоторые цвета (особенно оттенки синего) получаются менее яркими, чем яркие оттенки основных цветов RGB-модели. Плюс к этому, обычная RGB-модель использует в качестве базовых цветов набор красный-зеленый-синий, в то время, как в цветовом колесе в качестве основных цветов модели используется набор красный-желтый-синий. Это приводит к тому, что цвета в генераторе немного не совпадают с цветами в ФотоШопе и в интернет-браузерах. Но это несовпадение является несущественным.

Настройка цветовых вариаций

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

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

Цветовые схемы

Итоговый цветовой набор делается установкой базового цвета с помощью одной из цветовых схем. Вы можете выбрать нужную схему, нажав какую-нибудь иконку ниже цветового круга. Несколько этих схем позволяют сделать дополнительные настройки. Вы можете выбрать одну из следующих схем:

• Монохроматическая схема. Монохроматическая схема основана только на одной цветовой гамме, и использует вариации изменения цвета только путем изменения его насыщенности и яркости. Черный и белый цвета в эту схему всегда добавляются. Результат является удобным для глаз, даже при использовании агрессивных цветов. Однако, эта схема трудна для реализации и правильный результат не гарантирован. Генератор делает только несколько вариантов монохроматических схем для каждого цвета. Вы сможете сделать и другие - более или менее насыщенным, светлее или темнее. Монохроматические вариации также сделаны для каждого цвета и в других схемах. Они отображаются в виде маленьких кликабельных квадратов рядом с каждым цветом.


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


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


• Схема "двойной контраст"/Тетрада. Эта цветовая схема создается с помощью двух противоположных базовых контрастных цветов и двух дополнительных цветов, находящихся между ними. Когда углы между всеми этими четырьмя цветами равны 90°, то эта цветовая схема называется тетрадой. Тетрады требуют очень осторожного деликатного подхода и планирования, так как для восприятия глаза они представляют собой достаточно агрессивное сочетание цветов. А если уменьшать углы между дополнительными и основными цветами, то это вызывает уменьшение психологического напряжения. Но тем не менее эта цветовая схема всегда более напряженная, чем другие. Неумелое применение данной цветовой схемы на своем сайте может создать у посетителей сайта психологический дискомфорт.


• Аналоговая схема. В этой схеме у базового цвета есть два дополнительных цвета. От схемы "мягкого контраста" аналоговая схема отличается тем, что эти дополнительные цвета расположены рядом с основным цветом, а не рядом с контрастным. Для глаза эта схема воспринимается очень элегантно, показывает более или менее широкий спектр гаммы теплых или холодных цветов. Это психологически не напрягает. Расстояния между цветами в 15°-30° считаются оптимальным выбором. В появившемся квадратике снизу можно поставить галочку для включения еще одного четвертого цвета, который является контрастным к основному. Но это добавить напряженность в палитру и может у посетителей сайта создать ощущение агрессии. Поэтому аналоговая схема из четырех цветов подойдет не для любого сайта. Но если этот добавочный контрастный цвет используется на web-странице только в мелких деталях, то может получиться достаточно эффектно и элегантно.

Другие функции

Когда Вы подбираете цвета для своего сайта, то эти цвета обязательно должны входить в набор безопасных цветов для сайтов. Специально для этого сверху есть квадратик "Установить Web-безопастные цвета", в котором можно установить галочку, чтобы вся программа работала только с безопасными цветами. При этом все цвета в схемах будет преобразованы в 216-цветов цветового пространства WebColors. Это преобразование меняет цветовые оттенки и поэтому сбалансированная схема может быть слегка деформирована.

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

• Нормальное зрение (около 85,5% населения)
• Протанопия (1% мужчин)
• Дейтеранопия (1% мужчин)
• Тританопия (около 0003% населения)
• Протаномалия (1% мужчин)
• Дейтераномалия (5% мужчин, 0.4% женщин)
• Тританомалия (почти 0 %)
• Полный дальтонизм (0005% населения)
• Атипичная монохроматичность

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

Кстати, проверьте себя, нет ли у Вас каких-нибудь отклонений в восприятии цвета.

Здесь изображено число 37. Люди с сильно выраженной протанопией не увидят его. Люди со слабо выраженной протанопией могут частично не увидеть цифру 7.	Здесь изображено число 49. Люди с сильно выраженной дейтеранопией не увидят его. Люди со слабо выраженной дейтеранопией могут частично не увидеть цифру 9.	Здесь изображено число 56. Люди с сильно выраженной тританопией не увидят его. Люди со слабо выраженной тританопией могут частично не увидеть цифру 6.

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

В левом нижнем углу есть ссылка "Ввод RGB (16-ричный)", чтобы ввести любой 16-ричный код нужного цвета, который Вы желаете сделать основным.

Наконец, чтобы не забывать какие-нибудь понравившиеся Вам промежуточные цветовые схемы, Вы можете сохранять их URL-ы. Для этого нужно внизу нажать на ссылку "Сохранить URL этой цветовой схемы", которая генерирует нужный URL в адресной строке браузера, и где-нибудь сохранить эту адресную строку. Если закрыть текущую сессию браузера, а потом открыть ее опять, то откроется цветовая схема по умолчанию. Но если Вы предварительно сохранили один или несколько нужных Вам URL-ов, то Вы можете ввести какой-нибудь из них в адресную строку своего браузера и сразу перейти на нужную цветовую схему. Понятно, что эти сохраненные URL-ы Вы можете использовать и в качестве ссылок и в качестве web-адресов, которые Вы можете передавать другим людям в Интернете, например, по электронной почте. Для серьезной дизайнерской работы Вы можете хранить в закладках своего браузера целые коллекции нужных цветовых схем.

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

------------------

Автор статьи: Евгений Миронов.