Формат
hex при указании цветов в CSS, пожалуй, является самым популярным. Формат с нами давно, к нему все привыкли, он идёт по умолчанию практически во всех редакторах, есть куча инструментов для трансформации, он самый короткий (короче только некоторые именованные цвета). Если не стоит задача делать динамические палитры в браузере, поддерживать мониторы с широким охватом цветов, использовать математику для расчёта цветов, то hex — это самый очевидный выбор.Но бывало же такое, что дизайнер в макете везде использовал hex, но в одном месте захотел сделать прозрачность? В итоге все цвета задаются в
hex, а цвет с прозрачностью приходится писать в rgba. В этот момент разрушается единообразие формата указания цветов. Появляются как минимум две разные нотации, а rgba ещё и кучей разных способов можно записать, но об этом в другой раз.Так вот, уже достаточно давно в
hex можно указывать прозрачность, но почему-то я ещё ни разу не видел, чтобы этим кто-то пользовался. Возможно, потому что это не удобно: представьте себе 60% прозрачности в шестнадцатеричном формате? Это будет 99, а не 3C, как можно было подумать 🤯В hex альфа-канал задаётся добавлением в конец шестнадцатеричных чисел. То есть формат записи следующий:
#RRGGBBAA или #RGBA.То есть:
#000, #000F, #000000 и #000000FF — чёрный непрозрачный, то же самое, что rgb(0 0 0) и rgb(0 0 0 / 1)#0000 и #00000000 — чёрный прозрачный, то же самое, что rgb(0 0 0 / 0)#000C и #000000CC — чёрный с 80% прозрачности, то же самое, что rgb(0 0 0 / 0.8)#00000040 — чёрный с 25% прозрачности, тоже самое, что rgb(0 0 0 / 0.25)