Результат
У этой страницы вообще нет серверной части. Вставленная таблица разбирается кодом JavaScript внутри вашего же браузера, график рисуется на элементе canvas на вашей машине, файл экспорта собирается локально. Ничего не загружается, не хранится и не пишется ни в какие логи. После загрузки страницы можно отключить сеть — всё продолжит работать, и это самый простой способ проверить обещание самостоятельно.
Факты и границы применимости
| Диапазон тона | От 0° до 360° |
|---|---|
| Диапазон насыщенности и яркости | От 0% до 100% |
| Формула яркости | V = max(R, G, B) / 255 |
| Формула насыщенности | S = (max − min) / max, при max = 0 → S = 0 |
Когда этот метод вводит в заблуждение
- HSV — не единственная цилиндрическая модель: не путайте её с похожей, но иной моделью HSL (тон и там, и там задаётся одинаково, но насыщенность и яркость считаются по-разному).
- При очень тёмных цветах (яркость близка к 0%) тон и насыщенность становятся малозначимыми — визуально разные значения тона могут выглядеть как один и тот же почти чёрный цвет.
- При нулевой насыщенности (оттенки серого, включая чёрный и белый) тон математически не определён — конвертер в этом случае показывает 0°.
- Результат — это просто другая система координат для того же цвета, а не другое цветовое пространство: он не содержит информации о цветовом профиле экрана.
Как это считается
Значения R, G и B нормализуются делением на 255, чтобы получить числа от 0 до 1.
Яркость (V) — это максимум из нормализованных R, G, B.
Насыщенность (S) вычисляется как отношение разницы между максимумом и минимумом каналов к максимуму (при максимуме, равном нулю, насыщенность считается нулевой).
Тон (H) вычисляется по тому, какой из каналов R, G или B оказался максимальным, с помощью кусочной формулы, дающей значение от 0° до 360°.
Вопросы и ответы
Чем HSV отличается от HSL?
В обеих моделях тон задаётся одинаково, но насыщенность и яркость/светлота вычисляются по разным формулам, поэтому одинаковые проценты S и L (или V) в HSL и HSV дают разные цвета.
Почему при S=0% показывается тон 0°, хотя цвет серый?
Тон математически не определён для оттенков серого, поэтому по соглашению используется значение 0° — на восприятие серого цвета это никак не влияет.
Можно ли использовать HSV в CSS напрямую?
Современный CSS не поддерживает функцию hsv() напрямую — для использования в стилях удобнее перевести результат в HSL или HEX/RGB отдельным конвертером.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.