Тон выбирает семейство
Двигайтесь по кругу через красный, жёлтый, зелёный, циан, синий и пурпурный. При нулевой насыщенности тон почти не виден.
Бесплатный инструмент цвета
Палитра HSB и конвертер HEX RGB
Выберите цвет по тону, насыщенности и яркости либо введите точное значение HEX или RGB. Все форматы синхронизированы, поэтому оттенок легко настроить и скопировать.
Обновлено 18 июля 2026 года
палитра HSB
Что делает эта палитра HSB?
Палитра позволяет менять тон от 0 до 360 градусов, насыщенность и яркость от 0 до 100 процентов. Один и тот же экранный цвет преобразуется в шестизначный HEX и RGB, все поля остаются синхронными, а результат можно скопировать. Инструмент подходит для мультяшной палитры, проверки дизайн-токена, изучения влияния каналов и подготовки цветов к сравнению в калькуляторе Delta E Toon Tone.
HSB · HEX · RGB
Выберите и преобразуйте цвет
Передвиньте ползунок, введите число, выберите образец или напишите HEX. Предпросмотр и форматы обновляются из одного цвета.
Живой предпросмотр#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
Переменная CSS
--toon-color: #2FB8D8;Мультяшные образцы цвета
Это редактируемые примеры Toon Tone, а не официальные цвета франшиз.
Как читать три канала HSB
HSB разделяет решение на семейство, интенсивность и уровень света. Меняйте по одному каналу, чтобы понять причину отличия.
Насыщенность задаёт интенсивность
Снижение ведёт к серому, повышение делает тон ярче. Это не простое осветление или затемнение цвета.
Яркость задаёт верхний уровень
Ноль даёт чёрный. При повышении проявляются тон и насыщенность, но воспринимаемая светлота зависит от семейства и экрана.
Выберите управление под задачу
Форматы описывают один цвет с разных сторон. Сначала определите решение, затем используйте канал или измерение, которое на него отвечает.
| Задача | С чего начать | Что проверить |
|---|---|---|
| Выбрать красное, зелёное или синее семейство | Тон | Насыщенность, затем яркость |
| Сделать цвет ярким или приглушённым | Насыщенность | Сохранять тон при сравнении |
| Осветлить или затемнить | Яркость | Проверить контраст в контексте |
| Скопировать веб- или дизайн-токен | HEX или RGB | Записать источник и профиль |
| Измерить разницу двух цветов | Калькулятор Delta E | Смотреть образцы и разницы HSB |
Как HSB организует решение о цвете
HSB означает тон, насыщенность и яркость. Тон отмечает положение на круговой цветовой шкале, насыщенность показывает удаление от нейтрального серого, а яркость управляет максимальным уровнем каналов отображения. Такое разделение похоже на естественный порядок редактирования: сначала выбирается широкое цветовое семейство, затем определяется его интенсивность и в конце настраивается светлый или тёмный характер результата. Все три числа вместе описывают один цифровой цвет; ни одно из них само по себе не является оценкой качества.
Эту же модель часто называют HSV, где вместо Brightness используется слово Value. В обычных цифровых инструментах HSB и HSV, как правило, означают одну математическую модель. HSL отличается: его ось светлоты помещает чистые тона в середину и выше смешивает их с белым. Поэтому процент HSL нельзя бездумно вставлять в поле HSB. Страница показывает названия каналов вместе с HEX и RGB, чтобы было легче заметить различия терминов, шкал и округления в разных программах.
Надёжный порядок настройки тона, насыщенности и яркости
Начните с тона при достаточно высокой насыщенности и яркости, чтобы семейство было хорошо видно. Сначала попадите в область красного, оранжевого, жёлтого, зелёного, циана, синего или фиолетового, а потом ищите малые числовые различия. Затем уменьшайте насыщенность до нужной мягкости. Многие запомнившиеся мультяшные оттенки менее насыщенны, чем подсказывает их название, особенно из-за теней, сжатия и соседних цветов. Яркость настраивайте последней, чтобы не принять тёмную версию правильного тона за другое семейство.
Для точной работы меняйте один канал и записывайте предыдущее значение. Одновременный большой сдвиг может дать приятный результат, но скроет, какая коррекция решила задачу. Синхронные поля HEX и RGB создают устойчивое значение для передачи после визуального поиска. Если утверждённый токен уже существует, введите его прямо, а не восстанавливайте ползунками. Палитра должна связывать исследование с точным значением, а не заменять известный источник новой приблизительной копией.
Что происходит при преобразовании HEX, RGB и HSB
HEX и RGB кодируют количества красного, зелёного и синего для цифрового экрана. Шестизначный HEX хранит по две шестнадцатеричные цифры на канал, а RGB обычно показывает те же каналы десятичными числами от 0 до 255. Палитра переводит эти значения в HSB, редактирует координаты и возвращает результат в отображаемый RGB. Трёхзначный HEX предварительно разворачивается в шесть цифр. Небольшие расхождения при обратном ходе возможны, когда непрерывные проценты округляются до целых чисел интерфейса.
Преобразование не определяет официальное название, спецификацию бренда, рецепт краски или физический образец. Оно не калибрует монитор, не угадывает профиль изображения и не гарантирует одинаковый вид на другом устройстве. Сохраняйте исходный токен при требовании точного воспроизведения и отмечайте, получен ли он из дизайн-системы, исходного файла или снимка экрана. Сжатое изображение уже может содержать изменённые пиксели. Расчёт будет корректным для введённого числа, но само число может не быть авторитетным цветом, который требовалось найти.
Использование для мультяшных палитр и иллюстрации
Мультфильмы часто используют ясные цветовые семейства, но запоминаемая индивидуальность оттенка зависит не только от простого названия. Жёлтый бывает зеленоватым или тёплым, синий — бледным или очень насыщенным, красный смещается к коралловому, оранжевому или пурпурному. Создавайте в HSB небольшое семейство связанных цветов, не теряя исходный тон. Скопируйте HEX в заметки и намеренно меняйте насыщенность или яркость для бликов, теней, акцентов интерфейса и удобных сравнительных образцов.
Образцы на странице — общие примеры Toon Tone. Они помогают изучить управление, но не являются официальными кодами студии, персонажа, франшизы, печати или товара. При наличии утверждённой палитры следуйте её источнику. Во время изучения изображения сохраняйте видимой выбранную область и условия просмотра. Маленький акцент, затенённый кадр и крупная плоская область могут дать разные представительные значения, хотя в повседневной речи их называют одним цветом.
Экраны, контраст и воспринимаемая разница
Предпросмотр создаётся браузером, поэтому вид зависит от калибровки, яркости экрана, управления цветом, угла обзора, окружающего света и соседних оттенков. Яркость HSB не измеряет воспринимаемую светлоту и не является коэффициентом доступного контраста. Полностью яркие жёлтый и синий могут иметь одинаковое значение B, но выглядеть совершенно по-разному. Проверяйте текст, значки, фокус и элементы управления подходящим методом контраста на реальной паре переднего и заднего плана.
Для сравнения двух сохранённых цветов используйте калькулятор Delta E как отдельное измерение и смотрите образцы рядом с числом. Delta E моделирует общую воспринимаемую разницу, а каналы HSB дают понятное направление редактирования. Ни один результат не создаёт универсального порога для бренда, доступности, печати или производства. Итоговое решение должно следовать применимой спецификации, калиброванному процессу и реальным условиям вывода, а не одному удобному числу общего браузерного инструмента.
От исследования цвета к практике Toon Tone
Toon Tone использует тон, насыщенность и яркость, потому что так легче диагностировать ошибку запомненного цвета. После открытия ответа сравнивайте цель и попытку по одному каналу. Если тон близок, но попытка слишком кричащая, уменьшите насыщенность; если семейство верное, но оттенок тяжёлый, поднимите яркость. В отдельной палитре нет скрытой цели и счёта, поэтому здесь удобно свободно изучить управление перед возвратом в раунд памяти, где эталон исчезает.
Полезный цикл короток: изучите цвет, скопируйте значения, спрячьте эталон и попробуйте восстановить впечатление в игре. Затем найдите самое большое отклонение по ответу или Delta E. Немедленные повторы не доказывают устойчивое улучшение, потому что память чисел временно заменяет зрительную. В следующих сессиях добавляйте незнакомые цвета и исправляйте один повторяющийся сдвиг, например привычку делать приглушённые тона слишком яркими, вместо заучивания списка ответов.
Продолжить работу с этим цветом
Вопросы о палитре HSB
HSB и HSV — это одно и то же?
Обычно да. HSB называет третий канал яркостью, HSV — значением. Перед переносом чисел всегда проверяйте документированные диапазоны программы.
HSB совпадает с HSL?
Нет. Обе модели используют тон и насыщенность, но HSL иначе рассчитывает светлоту. Одинаковые проценты могут дать разные цвета около белого и чёрного.
Можно преобразовать трёхзначный HEX?
Да. Сокращение #0af разворачивается в #00AAFF перед преобразованием. Шесть цифр работают с начальным знаком # или без него.
Инструмент отправляет или сохраняет мой цвет?
Учётная запись и загрузка на сервер не нужны. Палитра работает в браузере и копирует только показанный текст, если доступен буфер обмена.
Доказывает ли яркость HSB доступный контраст?
Нет. Доступный контраст сравнивает относительную яркость переднего и заднего плана. Одна яркость HSB не является расчётом WCAG.
Почему другой инструмент показывает немного иные числа?
Причиной бывают округление, применение HSL, управление цветом или большая точность. Сравните итоговый HEX или RGB и описание модели.