CSS / Цвет

Цвета с прозрачностью

Добавляйте альфа-канал к HEX-цвету и получайте готовые значения HEX8, RGBA и HSLA. Сравнивайте результат на светлом и тёмном фоне до переноса в интерфейс.

Настроить цвет Все инструменты

4 форматаАльфа 0–100%Без отправки данных

Для расчётов нужен JavaScript. Если калькулятор не загрузился, обновите страницу. Ниже показан пример; поля станут доступны после загрузки.

Рабочая область

Выберите цвет и прозрачность

Можно использовать короткий или полный HEX. Если вставить значение с альфа-каналом — например, #A970FFCC — прозрачность будет прочитана автоматически.

color.alpha.converterРаботает в браузере

Исходные данные

Выберите оттенок визуально или вставьте точное HEX-значение из макета.

Палитра

HEX-цвет

Поддерживаются #RGB, #RGBA, #RRGGBB и #RRGGBBAA.

Прозрачность

Альфа, %

Быстрая прозрачность

Цвета системы

Живое превью

Один цвет — два фона

Полупрозрачный цвет смешивается с фоном, поэтому одинаковое значение выглядит по-разному в светлой и тёмной теме.

На светлом фоне

На тёмном фоне

HEX8#A970FFCC

RGBArgba(169, 112, 255, 0.8)

HSLAhsla(264, 100%, 72%, 0.8)

CSS--color-overlay: rgba(169, 112, 255, 0.8);

RGB-каналы: 169 · 112 · 255
Alpha HEX: CC
Alpha: 80%

Форматы CSS

Как записывается прозрачность

Значения описывают один цвет, но подходят для разных способов хранения и передачи дизайн-токенов.

#A970FFCC

HEX8

Последние два символа — альфа-канал от 00 до FF. Формат компактный и удобен рядом с обычными HEX-токенами.

rgba(…, .8)

RGBA

Каналы представлены числами от 0 до 255, а прозрачность — десятичным значением от 0 до 1. Запись легко читать в коде.

hsla(…, .8)

HSLA

Оттенок, насыщенность и светлота удобны для программного изменения палитры и построения связанных цветовых состояний.

По теме

CSS