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

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

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

Инструменты веб-цветов на 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).

Генератор RGB цветов

С помощью шкалы или вручную задаете числовые значения от 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%).

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

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

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

Стандарт HWB

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

CMYK цвета

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

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

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

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

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

Таблица для формата натуральных веб-цветов NCol

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

Градиенты

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

 Инструмент создания градиентов

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

Теория цвета

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

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

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

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

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

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

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

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

Палитры

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

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

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

Веб-цвета брендов

Тренды

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

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

2 комментария к статье “Веб-цвета в дизайне — сервис W3Schools с таблицами, кодам и другими инструментами”
  1. Жанна

    Весьма познавательный сервис по разным цветовым таблицам и кодам. Есть, конечно, инструменты помощнее, но здесь все собрано в одном месте — это удобно.

  2. Markul

    W3Schools — отличная шпаргалка для разработчика.. по CSS постоянно туда из поиска попадаю дабы посмотреть какие-то детали.

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *