Альфа-канал и прозрачность цвета в CSS

Alpha задаёт непрозрачность, а не новый цвет

Альфа-канал не создаёт самостоятельную бледную версию цвета. Он определяет долю переднего плана при композитинге с подложкой. Поэтому видимый результат зависит от обоих цветов и всех промежуточных слоёв. Один и тот же rgb(0 0 0 / 50%) выглядит средне-серым на белом, темнее на сером и может исчезнуть на чёрном. Alpha обычно задают числом от 0 до 1 или процентом от 0% до 100%. Это именно непрозрачность: большее значение означает больший вклад переднего плана, а не большую прозрачность.

Ключевое слово transparent обозначает полностью прозрачный цвет. Оно удобно в градиентах и переходах, однако у полностью прозрачной конечной точки остаются цветовые компоненты, способные влиять на интерполяцию в зависимости от пространства и правил. Нельзя считать, что любой переход к transparent равнозначен уменьшению только альфа-канала второй точки. Когда интерполяция должна быть точной, обе конечные точки лучше явно задать в выбранном синтаксисе и проверить градиент. Для обычной подложки цвет с явным alpha после косой черты чаще яснее выражает намерение.

В восьмизначном HEX alpha стоит последним

Восьмизначный HEX имеет порядок #RRGGBBAA: байт alpha идёт после красного, зелёного и синего. В #4F46E580 пары означают красный 4F, зелёный 46, синий E5 и alpha 80. Это не последовательность ARGB. Четырёхзначное сокращение #RGBA разворачивается повторением каждого символа так же, как #RGB. Поскольку для alpha доступно лишь 256 байтовых значений, 80 в шестнадцатеричной системе равно 128/255, то есть примерно 50,2%, а не математически точным 50%. Для читаемого точного процента удобнее функциональная запись.

.alpha-examples {
  --overlay-a: #4f46e580;
  --overlay-b: rgb(79 70 229 / 50%);
  --overlay-c: hsl(243.4 75.4% 58.6% / 0.5);
}

Функциональная запись делает alpha явным

Современные rgb(), hsl(), hwb(), lab() и oklch() помещают alpha после косой черты. Его можно задать числом или процентом, поэтому rgb(79 70 229 / 50%) легко проверить при ревью. Старые имена rgba() и hsla() остаются псевдонимами ради совместимости, но современные rgb() и hsl() уже принимают alpha. Альфа-канал не расширяет цветовой охват и не меняет координаты основных каналов. Единицы каналов должны соответствовать выбранной функции; смешивать старые запятые и современную грамматику с пробелами в одной функции нельзя.

• 0 и 0% полностью прозрачны; 1 и 100% полностью непрозрачны.
• В #RRGGBBAA пара AA всегда последняя, а не первая.
• Байт 80 означает 128/255, то есть около 50,2% непрозрачности.
• Alpha после косой черты принадлежит одному цвету и не меняет соседние краски.

Alpha цвета и opacity имеют разную область

Alpha внутри цвета влияет только на эту краску: например, полупрозрачный фон не обязан ослаблять текст и дочерние элементы. Свойство opacity применяется ко всему элементу после отрисовки содержимого в группу, поэтому вместе бледнеют потомки, границы, текст, тени и фон. Из-за этого opacity часто не подходит для прозрачной панели, на которой текст должен оставаться непрозрачным. Псевдоэлемент или отдельный слой позволяют управлять фоном и содержимым независимо. Интерактивность тоже отделена: opacity: 0 само по себе не отключает события указателя и фокус.

Композитинг меняет видимые каналы

Композитинг вычисляет выход по цветам переднего плана, подложки и alpha. Несколько прозрачных слоёв перемножают влияние, поэтому одинаковый токен alpha во вложенных подложках не даёт предсказуемого итогового цвета без знания стека. Фильтры, режимы смешивания, изображения, градиенты и backdrop-эффекты добавляют зависимости. DevTools может показать разрешённое значение, но для доступности важны пиксели конкретного состояния. Нужно учитывать фон для hover, focus, disabled, selected и модального слоя. Образец токена только на белом фоне не доказывает пригодность во всех компонентах.

.notice {
  background: rgb(255 255 255 / 92%);
  border-color: rgb(15 23 42 / 18%);
}

.disabled {
  opacity: 0.55;
}

Доступность зависит от итогового фона

Контраст WCAG оценивают между итоговыми цветами переднего плана и фона. У полупрозрачного текста нет единственного коэффициента контраста независимо от подложки. Подложка также способна повысить или снизить контраст содержимого под ней. Для текста поверх меняющегося изображения нужна контролируемая непрозрачная или достаточно стабильная поверхность либо расчёт по худшему допустимому фону. Нельзя объявлять соответствие по нескомпонованным RGB-координатам. Порог зависит от типа текста и критерия, но относительную яркость всегда считают для разрешённых итоговых цветов.

• Проверяйте все поддерживаемые фоны и состояния компонента.
• Используйте alpha для одной краски, а opacity — только для осознанного затухания группы.
• Измеряйте контраст после композитинга, а не только по исходным каналам.
• Явно управляйте интерактивностью даже у визуально прозрачного элемента.

Надёжный процесс проверки

При ревью проверяйте синтаксис, область действия, состояние и фолбэк. Убедитесь, что в #RRGGBBAA правильный порядок и байт не скопирован из ARGB API, а процент не прочитан как процент прозрачности. Решите, должна ли бледнеть одна краска или вся группа элемента. Проверьте каждый разрешённый фон, forced-colors и пользовательские предпочтения, если они поддерживаются. Называйте токены по назначению, например overlay или border-subtle, а не по предполагаемому фону. После изменения фоновой палитры тесты композитинга и контраста повторяют.