Canvas возвращает четыре байта: красный, зелёный, синий и альфа от 0 до 255. PixelPick считает эти целые исходными. Непрозрачный HEX содержит по две цифры на RGB-канал. Если альфа меньше 255, добавляется пара #RRGGBBAA. RGB использует три целых, а rgba делит альфа на 255 и округляет до трёх знаков.

HSL происходит из тех же RGB

RGB нормализуется в 0..1. Светлота — середина максимального и минимального канала. Насыщенность зависит от их разницы и светлоты, оттенок — от максимального канала. PixelPick округляет оттенок до градуса, насыщенность и светлоту до процента. Альфа показывается отдельно и не накладывается на белый или чёрный.

Один пример с альфа

Для декодированного RGBA 51, 102, 153, 85 HEX — #33669955. RGB — rgb(51, 102, 153), форма с альфа — rgba(51, 102, 153, 0.333). HSL — hsl(210, 50%, 40%), hsla — hsla(210, 50%, 40%, 0.333). Итоговый вид зависит от фона под полупрозрачным пикселем.

Понимайте границу значения

PixelPick показывает RGBA-байты после декодирования файла браузером в Canvas. Встроенный профиль, преобразование браузера и экран могут дать другие значения в ином процессе. Используйте результат для обычной цифровой работы, а важные брендовые или производственные цвета сверяйте с авторитетным источником. Это не калиброванная колориметрия, подбор физической краски, медицинская интерпретация, сертификация доступности или измерение безопасности.