Как оформить цвета в CSS и описать оттенки в коде

CSS (Cascading Style Sheets) — это текстовый формат описания дизайна в коде сайта. Он включает в себя все элементы: цвет, форму, размер, шрифт, обводку и так далее.

Возьмём для примера простой жёлтый прямоугольник с зелёной рамкой.

Описание размера этой фигуры в коде будет выглядеть так: width: 241px; height: 190px

Помимо размеров, в коде сайта важно прописать толщину границы и цвета элементов. Здесь на помощь приходит CSS, который отображает эту информацию так:

Border — граница шириной 5 пикселей. Solid — сплошная заливка. Background — основной цвет фона

Во многих современных графических редакторах есть встроенная функция отображения элементов дизайна в CSS. Например, в Figma он называется Dev Mod.

В CSS есть три основных объекта, которым можно установить цвет.

1. Блок. Любой элемент страницы (картинка, кнопка, таблица) — это прямоугольный блок.
2. Граница. У каждого элемента сайта можно обозначить границы. Причём им можно задать не только цвет, но и ширину, а также стиль, как в примере с жёлтым прямоугольником с зелёной границей.
3. Текст. Сюда входит как оттенок самого текста, так и его элементов, например, фона.

В CSS цвет присваивается элементу с помощью свойств. Вот основные свойства цвета для элементов страницы:

● background-color: цвет фона блока или текста;
● borders: оттенок границ;
● border-color: общий цвет границ;
● border-top-color, border-right-color, border-left-color, border-bottom-color: отдельные оттенки разных границ;
● color: цвет текста и вариантов его форматирования, например перечёркивания;
● text-shadow: оттенок тени;
● text-decoration-color: цвет зачёркивания и подчёркивания, например для выделения ссылок;
● caret-color: оттенок курсора, используется только в объектах страницы, которые пользователь может изменить, например текстовое поле формы.

Возьмём для примера простой блок с надписью.

Свойства цвета для него в CSS устанавливаются вот так.

Научиться гармонично сочетать цвета в дизайне сайтов и грамотно описывать их в коде можно на курсе «Веб-дизайнер».

Есть несколько способов назначить цвет элемента в CSS. Рассмотрим, чем они отличаются, на примере палитры из трёх оттенков синего.

Для наглядности используем цвета, которые отличаются только по светлости

Назначить их для объекта в CSS можно, используя один из четырёх форматов.

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

Коды цветов в CSS из примера в этом цветовом пространстве будет выглядеть в HTML так:

Первые три цифры обозначают уровни оттенков красного, зелёного и синего цвета, а последняя — а (альфа) обозначает степень прозрачности.

Это способ записи RGB, у них одинаковый цветовой диапазон, по сути это одно и то же, просто оттенки записываются в более коротком формате цифрами и буквами. Именно поэтому HEX в CSS используют чаще, чем RGB, — для компактности кода.
В коде цвета получатся такими:

Самые удобные цветовые пространства для отображения цветов, особенно для создания палитры в CSS, потому что, глядя на код HTML, можно понять разницу оттенков:

Здесь видно, что цвета отличаются только в третьем значении, то есть по показателю lightness — по свету.

Новый формат, который появился в 2023 году. Он наиболее корректно отображает цвета и гармонично сочетает их по яркости. Его только начинают поддерживать браузеры, например, он уже есть в Google Chrome и Safari. За этим форматом — будущее веб-дизайна, потому что он сочетает в себе самый большой цветовой диапазон и удобство отображения оттенков в CSS.

В CSS существуют общепризнанные стандартные названия цветов, которые также можно использовать в HTML-коде. Полную таблицу цветов CSS можно посмотреть, например, в Википедии для разработчиков W3C

У стандартных названий цветов также есть HEX-коды

При использовании цвета в CSS полезно создавать промежуточные названия, что особенно удобно, когда нужно изменить цвета в процессе вёрстки. К примеру, в коде сайта для отображения неправильных операций и предупреждений использовали один оттенок красного: red-500. Но в какой-то момент его решили сделать темнее и взять red-700. Менять в CSS цвет каждого элемента отдельно ― долго и неудобно, поэтому лучше создать промежуточное название. Допустим, color-danger, которое будет указано везде, где требуется выделить предупреждение. В этом случае достаточно изменить оттенок только в color-danger, и он автоматически применится ко всем нужным блокам.

Промежуточные цвета можно задать для любого объекта страницы

Если у сайта есть готовая палитра, что часто бывает, когда веб-дизайнер получает уже готовый фреймворк (структуру сайта), то цветам могут присваиваться имена классов на основе HEX-кодов.

Чем выше цифровое значение цвета в палитре, тем он темнее

В CSS такие классы отображаются так:

Чтобы задать цвет фона в CSS, нужно выбрать объект и указать код цвета. Например, установка фонового цвета страницы в HTML через промежуточный цвет выглядит так:

А цвет фона кнопки можно прописать так:

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

Также необходимо добавить свойство background-fit, которое указывает, как изображение меняется при масштабировании страницы.

Кроме того, можно указать свойство background-position, которое назначает расположение картинки на странице. Существует пять вариантов:

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