Три нотации, один цвет
Один и тот же пиксель, записанный тремя способами, потому что нотацию диктует место назначения:
| Нотация | Где уместна |
| --- | --- |
| #F5A63D | CSS, графические редакторы, везде, где цвет записывают |
| rgb(245, 166, 61) | Canvas, шейдеры, код, считающий с цветом |
| hsl(35, 90%, 60%) | Вывод более светлых, тёмных и приглушённых вариантов |
Несколько проб подряд
Каждая проба попадает в ленту истории. Это практичный способ проверить, действительно ли два участка изображения одного цвета: градиент, тень или артефакт JPEG часто делают две одинаковые на вид точки различающимися на несколько единиц по каждому каналу.
Почему числа могут не совпасть с макетом
Проба берётся с того, что декодировал и показал браузер, уже после преобразования цветового профиля. Это делает значение верным для веб-страницы и потенциально отличным от того, что лежит в исходном файле. Если важна точность относительно исходника, берите пробу в программе, которая им владеет.
Вопросы
Когда нужен RGB, а не HEX?+
Когда что-то принимает числовые каналы: canvas API, шейдер, таблица, библиотека визуализации данных или любой код, выполняющий арифметику над цветом. HEX — нотация для записи, RGB — та, с которой можно считать.
Для чего лучше HSL?+
Для вывода родственных цветов. Оттенок, насыщенность и светлота разделены, поэтому состояние при наведении — это тот же цвет с другой L. В RGB то же изменение означает согласованную правку трёх чисел в надежде, что оттенок не уедет.
Значения от 0 до 255 или от 0 до 1?+
От 0 до 255 на канал — так ожидают CSS rgb() и большинство инструментов. Для шейдеров и библиотек, работающих в диапазоне 0–1, делите на 255.
Можно взять несколько проб?+
Да — каждая проба сохраняется в небольшой ленте истории для сравнения, а клик по образцу возвращает его.