Веб-цвета в дизайне — сервис W3Schools с таблицами, кодам и другими инструментами

В продолжение статьи о полезных сервисах подбора цвета решили познакомить вас с еще одним интересным проектом — W3Schools. Помнится, раньше на портале в основном была информация о HTML/CSS, но теперь там можно найти и другие вопросы, касающиеся веб-разработки: PHP, JavaScript, Bootstrap, jQuery, XML.

Один из разделов W3Schools посвящен web цветам в дизайне сайтов, он содержит разные таблицы, генераторы, коды, палитры, форматы и т.п. Создатели ресурса рассмотрели практически все детали, которые так или иначе связаны с цветовым оформлением веб-проектов. И хотя многие из этих функций встречаются и в других местах, преимущество W3Schools в том, что все они собраны на одном сайте, и это удобно.

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

Названия цветов (Color Names)

Раздел содержит список всех web цветов в дизайне, к которым допускается обращение по названию: Red, Green, Aqua, BlueViolet DarkTurquoise FloralWhite и др. Вы можете покрасить элемент страницы или ее фон, используя имя вместо кодовых значений (HEX).

Все браузеры поддерживают данные 140+ цветовых имен. Они являются базовыми и отсортированы в алфавитном порядке. Есть ссылка для просмотра оттенков (Shades) и вариантов применения в тексте/фоне (кликайте по названию). В случае появления нового формата информация обновляется, разработчики стараются всегда поддерживать ее актуальность.

Таблица значений цвета (Color Values)

Категория аналогична предыдущей, но записи в списке сортируются по шестнадцатеричному HEX коду RGB модели: #000000, #000080, #00008B, #0000CD и т.п. Здесь также имеются ссылки на страницу с примерами.

Группы цветов (Color Groups)

Содержимое раздела отчасти похоже на предыдущие подборки — все те же 140+ кодов веб-цветов, которые сгруппированы в несколько таблиц с учетом исходного оттенка. К примеру, в группе «Purple Colors» найдете все ответвления фиолетового, начиная от самого светлого до тёмного. Также и с другими блоками: розовым, оранжевым, жёлтым, зелёным, голубым, синим, белым и др. В строках традиционно указаны: имя, HEX, ссылка на примеры.

Тени (Color Shades +Safe Colors)

Таблицы web цветов серого и красного позволяют увидеть всю суть и многообразие оттенков в дизайне. Чтобы сгенерировать красную палитру меняете первый параметр в RGB коде цвета (от 0 до 255), а зеленый и синий = 0. Что касается серого, то современные браузеры понимают и «gray», и «grey», но нужно использовать первый вариант.

Во второй части страницы находится таблица веб цветов безопасных для дизайна. Поскольку раньше компьютеры не могли поддерживать миллионы оттенков, была определена единая палитра, которая корректно работала во всех браузерах — Web Safe Colors.

Выбор цвета (Color Picker)

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

• сочетание с белым / чёрным текстом;
• вид с эффектом «тени»;
• более светлые / темные варианты;
• изменение параметров насыщенности и яркости.

Определить базовый цвет можно по разному: вписав код в поле, через небольшую палитру или с помощью HTML5.

Смешивание цветов (Color Mixer)

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

Задавайте информацию в инструменте выбора слева или просто вводя коды в полях Top color и Bottom color.

Конвертов форматов (Color Converter)

Элемент на странице отображает всевозможные форматы одного и того же цвета в веб дизайне. Это будет полезным в случае, когда надо перевести оттенок, к примеру, в HSL или HEX. Вводите в строке определенное значение и получаете все его варианты: в RGB, HEX, CMYK, HSL, HWB, NCOL + текстовый.

RGB цвета

Здесь найдете небольшой RGB калькулятор + информацию по данному формату веб-цвета. Он одинаково хорошо работает во всех браузерах, состоит из трех величин: красный, зеленый, синий — отсюда и название RGB (red, green, blue).

С помощью шкалы или вручную задаете числовые значения от 0 до 255 и получаете нужный результат. В этом и последующих инструментах дополнительно выводятся и другие варианты записи, что очень удобно. В самом низу найдете пример под CSS:

background-color: rgb(199, 63, 122);
color: rgb(86, 127, 144);

Формат HEX

Здесь используются те же базовые оттенки, что и в RGB-модели, но при этом они указываются через шестнадцатеричные значения — так называемые веб коды цветов. Формат записи имеет вид: #RRGGBB (red, green, blue), например, зеленый записывается как: #00FF00. В CSS выглядит следующим образом:

background-color: #00FF00;
color: #000000;

Формат цвета HSL

Еще один калькулятор на W3Schools, который состоит из 3-х параметров HSL (Hue, Saturation, Lightness):

• Hue — оттенок на шкале цветов (от 0% до 360%);
• Saturation — насыщенность от серого (0%) до полноценного цвета (100%);
• Яркость — градиент от черного (0%) до белого (100%).

Возможно на скриншоте вам будет понятнее:

Выбираем в шкале, например, Hue = синий, дальше ставим 92% насыщенности и 42% яркости — все это моментально переводится в HSL-формат.

Стандарт HWB

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

CMYK цвета

Еще один потенциальный будущий стандарт CSS4, который по принципу похож на RGB, но ориентируется на соотношение 4 оттенков:

• сине-зеленого (циан);
• пурпурного (маджента);
• жёлтого;
• и «ключевого» черного цвета, что регулирует интенсивность.

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

NCol (натуральный цвет)

Этот подход предложен специалистами W3Schools. Цветовое значение вычисляется через заданный оттенок с добавлением белого/черного (подобно HWB модели). Отличием является то, в первом параметре содержится имя цвета и его «градиентный порядок». К примеру, чистый красный или жёлтый обозначается как R0 и Y0 (с нулём). А, указывая цифру, вы определяете сдвиг влево по шкале цвета в процентах: оранжевый — R25, салатовый — Y25 и т.п.

Задумка в том, что web цвета в NCol более привычны человеческому глазу, и следовательно их легче описывать.

Градиенты

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

Штука похожая на генераторы градиентов. Удобно, если вы новичок в верстке.

Теория цвета

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

Цветовые круги (Color Wheels)

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

Параметры цвета

В данном разделе проясняется несколько параметров цвета относительно цветового колеса — оттенок, яркость, насыщенность, тени. Тоже больше теория. Понятнее будет, если заглянуть самостоятельно на страницу и посмотреть описание / примеры.

Схемы цветов (Color Schemes)

Под схемой подразумевают некую логическую комбинацию из карты оттенков. Основная задача дизайнера при этом — выбрать привлекательную и стильную палитру веб-цветов для сайта. Подобные функции предоставляют разные онлайн генераторы, о которых мы писали ранее. На W3Schools найдете пояснение общих принципов и логики работы типов схем (монохромных, аналоговых, дополняющих и т.п.).

Палитры

Страница содержит специально подобранные палитры веб цветов для бесплатного использования. Есть максимально популярные и интересные варианты за 2017, 2016 и др. года, а также оттенки в стиле песка, неба, пляжа и т.п. Можно заглянуть для вдохновения, хотя их и не так много.

Цвета брендов

Здесь представлены сочетания веб цветов, используемые известными компаниями в своих брендах. Не сказать, что это очень важная информация, но идея забавная — плюс по каждому значению указаны HEX коды.

Тренды

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

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