Что означают четыре значения

В записи rgba(40, 100, 160, 0.5) первые три числа задают красную, зелёную и синюю составляющие. Для привычной числовой записи каждый цветовой канал находится в диапазоне от 0 до 255. Последнее число — альфа-канал: здесь цвет имеет непрозрачность 50%.

Чем меньше альфа, тем сильнее виден фон под элементом. Значение 0 не означает белый цвет: оно означает, что этот цвет полностью прозрачен. Значение 1 оставляет исходный цвет непрозрачным. Поэтому одинаковая запись на белой и чёрной подложке выглядит по-разному.

В контексте веб-дизайна A означает Alpha. В описаниях некоторых осветительных приборов та же аббревиатура может использоваться иначе, например для дополнительного янтарного канала. Эта статья посвящена именно цветам на веб-страницах.

Как записать цвет в CSS

Классический вариант: background-color: rgba(40, 100, 160, 0.5);. Он задаёт полупрозрачный фон. Для текста используется свойство color, для цвета границы — border-color. Сам набор значений не определяет, какую часть элемента нужно окрасить: это делает свойство.

Современная запись того же цвета: rgb(40 100 160 / 50%). Компоненты разделены пробелами, альфа — косой чертой. Согласно документации MDN, rgba() является синонимом rgb(). Поэтому в новом коде можно использовать rgb() с альфа-компонентом.

Выберите один понятный стиль записи для проекта и используйте его последовательно. Не смешивайте разделители случайным образом. Если правило не применяется, сначала проверьте синтаксис, а уже затем ищите проблему в браузере.

Чем RGBA отличается от opacity

Альфа в цвете фона меняет только этот фон. Текст и вложенные элементы могут оставаться полностью непрозрачными. Это удобно для карточки поверх изображения: подложка пропускает часть картинки, а надпись сохраняет читаемость.

Свойство opacity: 0.5 применяется к элементу вместе с его содержимым. В результате бледнее становятся и фон, и текст, и иконки. Если цель — прозрачная подложка с чётким текстом, такая настройка обычно не соответствует задаче.

Непрозрачность родительского элемента нельзя отменить, просто установив дочернему opacity: 1. Родитель уже участвует в итоговом смешивании как целая группа. Правильнее изменить структуру оформления: например, отдельно задать полупрозрачный цвет фона.

Где полезна прозрачность

Первый сценарий — мягкая граница: border: 1px solid rgb(0 0 0 / 12%);. Она менее контрастна, чем сплошной чёрный контур. Но итоговый вид зависит от подложки, поэтому один и тот же цвет нужно проверить в светлой и тёмной теме.

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

Третий сценарий — тень или цветовая подсветка состояния. Прозрачность позволяет сделать их менее тяжёлыми. При этом состояние ошибки нельзя обозначать только слабой красной заливкой: добавьте понятный текст, чтобы смысл не зависел исключительно от различения цветов.

Почему цвет выглядит не так

Проверьте подложку и родительские элементы. Полупрозрачный синий поверх жёлтого не выглядит так же, как поверх белого. Если поверх него наложен ещё один прозрачный слой, результат дополнительно изменится. Не сравнивайте такой фрагмент с непрозрачным образцом из макета.

Посмотрите вычисленные стили в инструментах разработчика. Другое CSS-правило может переопределять фон, а изображение или псевдоэлемент — закрывать его. Для диагностики временно сравните тот же цвет с альфа 1: это помогает отделить проблему цвета от проблемы наложения.

Не заменяйте прозрачность осветлением RGB-каналов без понимания эффекта. Более светлый непрозрачный цвет и полупрозрачный цвет совпадут только на определённом фоне. При смене темы или изображения различие станет заметным.

Как проверить результат

Смотрите на готовый элемент в реальном контексте, а не только на плашку цвета. Проверьте длинный текст, ссылки, состояние фокуса и соседние элементы. Для текста особенно важен контраст итогового отображения с подложкой, а не красивые исходные числа в редакторе.

Если прозрачность декоративная, убедитесь, что без неё интерфейс остаётся понятным. Если она помогает выделить действие, проверьте, не стала ли кнопка похожа на недоступную. Хорошая настройка цвета поддерживает смысл интерфейса, а не заставляет посетителя угадывать состояние элемента.