Выбор цвета и Генератор палитры

HEX представляет цвет 6-значным шестнадцатеричным числом (#RRGGBB), это наиболее распространённый формат в веб-разработке. RGB указывает значения красного, зелёного и синего каналов в диапазоне 0-255. HSL определяет цвет через оттенок (0-360), насыщенность (0-100%) и светлоту (0-100%), что позволяет более интуитивно воспринимать цвета.

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

WCAG (Руководства по доступности веб-контента) устанавливает минимальные коэффициенты контрастности: 4.5:1 для обычного текста, 3:1 для крупного текста. Недостаточный контраст делает контент нечитаемым для пользователей с нарушениями зрения и пользователей мобильных устройств при ярком солнечном свете.

В CSS функции rgba() и hsla() принимают значение альфа от 0 до 1: rgba(255, 0, 0, 0.5) создаёт 50% прозрачный красный. В формате HEX можно использовать 8-значную нотацию: #FF000080. Современный CSS также поддерживает прозрачность в rgb(): rgb(255 0 0 / 50%).

Избегайте передачи информации только через цвет — дополняйте иконками, узорами и текстовыми метками. Используйте симуляторы дальтонизма для тестирования дизайна. Для наиболее распространённого типа дальтонизма (красно-зелёного) избегайте использования этих двух цветов в качестве различительных.

Используйте принципы теории цвета: дополнительные цвета (напротив), аналогичные (рядом), триада (интервал 120 градусов) и разделённые дополнительные. Выберите основной цвет и создайте гармоничные оттенки по этим принципам. Обычно одного основного, одного акцентного цвета и нейтральных тонов достаточно.