email
forum

Работа с цветом в CSS

Человеку свойственно сильное восприятие цвета. Окружающие нас цвета подсознательно влияют на эмоции и поведение. Подбор цвета при создании сайта c нуля имеет решающее значение для его развития ­­– цвет способен привлекать определенную группу пользователей в зависимости от ее жизненного опыта, окружающей обстановки и поведенческих факторов.

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

В CSS существуют четыре свойства, которые могу принимать значения цвета – color; background-color; border-color и outline-color.

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

Имя цвета CSS в верстке сайта

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

1
2
3
    .outlooker__menu_color {
    background-color: brown;
    };

RGB

Применение формата RGB является самым распространенным способом указания цвета в CSS. Модель RGB основана на смешении трех цветов: красного, зеленого и синего. Цвет в RGB может быть записан в четырех форматах:

Запишем цвет меню нашего сайта в разных форматах:
1
2
3
4
5
    .ourlooker__menu_color {
    background-color: rgb (62, 35, 35);
    background-color: rgb (24%, 15%, 14%);
    background-color: #3E2723;
    };

RGBA

RGBa – расширение формата RGB, с добавлением отдельного канала прозрачности. В RGBA используются только десятичные значения и проценты.

Следует отменить, что Internet Explorer не поддерживает rgba в версиях меньше 9.

Синтаксис:
1
2
3
4
    .outlooker__menu_color {
    background-color: rgb (62, 35, 35, 1);
    background-color: rgba (24%, 15%, 14%, 1);
    };

Цвет HSL

Современная альтернатива RGB. Работает с тремя параметрами – тон, насыщенность и яркость.

Подбор цвета при верстке сайта

Тон (Hue) – значение цвета определяется целым значением в диапазоне от 0 до 360 градусов. В цветовом круге это угол между цветом и осью круга. Мы можем определять. Начальные значения: 0/360 – красный цвет, 120 – зеленый, 240 – синий.

Насыщенность (Saturation) – определяется расстоянием от границ круга к центру. Насыщенность определяет силу цвета и измеряется в диапазоне от 0% – серый цвет до 100% – цветное изображение.

Яркость (Lightness) – измеряется по оси Z в диапазоне от 0% до 100%, где 0% – черный цвет, 50% – значение по умолчанию, 100% – белая засветка.

HSL имеет улучшенный формат записи:

1
2
3
    .outlooker__menu_color{
    background-color: hsl (9, 28%, 19%);
    }

В стандарт HSLa, по аналогии с RGB добавлена прозрачность.

Подбор цвета

Правильный подбор цветов при разработке современного сайта занятие из легких. Однако, в качестве ориентиров, вам могут помочь бренд буки и руководства по дизайну. Для разработчиков Google предоставляет доступ к Material Design, Apple к iOS Interface Guidelines. При составлении композиции цветов для вашего сайта, не лишним будет обратиться к каталогам домов мод и автомобильным проспектам.

Запись опубликована: 08.02.2017