Перевести HSL в HEX Hue Saturation Lightness ↔ Hexadecimal Бесплатно Онлайн Безопасно
Введите значение в HSL и сразу прочтите его в HEX. Счёт идёт в вашем браузере, никуда ничего не отправляется, а от чего зависит ответ, написано ниже, а не подразумевается.
Ничего не загружается
Откуда взялись эти записи
Hex и RGB — одно и то же, записанное дважды. Экранный цвет — это три числа: сколько излучить красного, зелёного и синего света, каждое от 0 до 255, то есть байт; hex просто записывает эти байты по основанию шестнадцать, так что #FF8800 и rgb(255, 136, 0) — одно и то же распоряжение одному и тому же пикселю. HSL придумали оттого, что ни то ни другое человеку не читается: он даёт тон как угол на цветовом круге, а насыщенность и светлоту в процентах, и потому дизайнер может сделать что-то светлее, не пересчитывая три числа. CMYK принадлежит совсем иному миру — краске, а не свету. Он вычитающий, построен из четырёх печатных форм и достаёт не до всякого цвета, какой может дать экран, ведь экран излучает свет, а бумага лишь отражает его.
Где они встречаются
Hex — это то, что набирают в таблице стилей и что выдаёт дизайнерский инструмент. RGB появляется всюду, где цвету нужна арифметика: градиенты, прозрачность, код, вычисляющий оттенок. К HSL тянутся, когда палитру подбирают руками, ведь нужные изменения обычно суть изменения одного из трёх его чисел. CMYK — то, чего просит типография, и перевод в него есть тот миг, когда макет перестаёт быть светом и становится краской.
Частые вопросы
Почему мой результат в CMYK не совпадает с типографским?
Потому что единственно верного перевода не существует. Арифметика на этой странице — простая, не зависящая от устройства; это верный ответ, когда нужна отправная точка или грубое соответствие. Типография переводит через цветовой профиль, учитывающий именно эту краску, бумагу и машину, и один и тот же цвет RGB даст на мелованной глянцевой бумаге не те значения CMYK, что на немелованной. Для всего, что обязано совпасть, просите у типографии их профиль, а не доверяйтесь формуле.
Почему некоторые экранные цвета нельзя напечатать?
Потому что эти два не достают до одних и тех же цветов. Экран делает цвет, прибавляя свет, и способен на яркий насыщенный голубой или зелёный, какого краска просто не повторит; бумага делает цвет, поглощая свет, и самое светлое, чем она может быть, — белизна страницы. Множество достижимых цветов называют охватом, и там, где охваты не пересекаются, перевод вынужден выбрать ближайший доступный цвет. Оттого яркий экранный цвет в печати часто выглядит слегка приглушённым.
Ответ точный?
Там, где обе единицы определены одна через другую целыми числами, — да; страница говорит об этом над числом, и единственное округление — в том, сколько знаков показано. Там, где отношение не имеет конечной десятичной записи, страница показывает двенадцать значащих цифр и называет соотношение приближённым, а не делает вид, что это не так.
Уходит ли с моего устройства что-нибудь из набранного?
Нет. Счёт идёт в вашем браузере; ничего не отправляется, да и некуда — сервера для этого нет. Загрузите страницу один раз, и она работает с выключенной сетью.
Зачем конвертировать HSL в HEX
Вы подобрали цвет в HSL, потому что это запись, в которой можно думать: оттенок 30, насыщенность 29%, светлота 28%, приглушённый коричневый, и более бледная версия на 34% для состояния при наведении. Теперь цвет должен куда-то попасть, где нужен код hex: в файл токенов дизайна, фирменный лист, инструмент, не понимающий hsl(), шаблон письма, сообщение коллеге. Конвертировать HSL в HEX — значит взять цвет, о котором вы рассуждали, и записать его в форме, короткой, однозначной и понятной всему.
Конвертация работает в направлении, противоположном тому, с которым дизайнеры сталкиваются первым. Она начинается с трёх удобных для человека чисел и приходит к трём байтам. Каждый шаг — простая арифметика, но она включает несколько случаев, похожих на тригонометрию, и округление, поэтому люди предпочитают, чтобы это сделали за них. Страница делает это в вашем браузере, и ничего не загружается. Ниже вы найдёте, как три числа становятся шестью цифрами hex, что конвертация сохраняет, почему цвет, прошедший через HSL, может оказаться на шаг-два от того места, откуда начал, как дизайнеры используют конвертацию и ловушки, которых следует избегать.
Как работает конвертация
От оттенка, насыщенности и светлоты к красному, зелёному и синему
Конвертер сначала вычисляет цветность, то есть насколько цвет далёк от серого: она растёт с насыщенностью и уменьшается по мере удаления светлоты от 50%. Затем он помещает оттенок в один из шести секторов цветового круга, каждый шириной 60 градусов, и по сектору решает, какой из трёх каналов на максимуме, какой на минимуме и какой лежит между. Наконец, он добавляет константу, чтобы светлота получилась верной, масштабирует три значения из диапазона от 0 до 1 к диапазону от 0 до 255 и округляет каждое до целого числа. Эти три байта записываются в шестнадцатеричной системе, по две цифры каждый.
Пример с числами
Возьмём hsl(30, 29%, 28%). Цветность — (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624. Оттенок в 30 градусов находится на полпути через первый сектор, поэтому средний канал равен половине цветности, 0.0812. Константа для добавления — 0.28 − 0.0812 = 0.1988. Так что красный — 0.1624 + 0.1988 = 0.3612, зелёный — 0.0812 + 0.1988 = 0.28, а синий — 0.1988. Умноженные на 255 и округлённые, это 92, 71 и 51. В hex это #5C4733.
Серые
Когда насыщенность равна 0%, цвет серый независимо от оттенка, а три байта равны. hsl(0, 0%, 50%) — это #808080. Оттенок игнорируется, поэтому любое число оттенка даёт один и тот же серый.
Что конвертация сохраняет и чего не может
Она сохраняет цвет так, как вы его описали
Результат — цвет, оттенок, насыщенность и светлоту которого вы задали, записанный байтами. Три числа, которые вы ввели, — это цвет так, как его сортирует глаз: оттенок на круге, насколько он насыщен, насколько светел. Поэтому HSL стоит иметь, а конвертация верно переносит ваш выбор в hex.
Она не может обещать те же числа на обратном пути
Оба описывают одни и те же цвета, но HSL достигает их через другую геометрию, а три его числа округляются до целых градусов и целых процентов при записи. Поэтому цвет, переведённый в HSL и обратно, может оказаться на один-два шага от того места, откуда начал: визуально тот же, но не байт в байт. В нашем примере #5A4632 был цветом, чей HSL — около hsl(30, 29%, 28%); конвертация этих округлённых цифр обратно даёт #5C4733, на два шага в стороне по красному. Если вам нужны точные байты, храните hex.
Знаки процента и градуса
Страница читает оттенок в градусах, а насыщенность и светлоту — в процентах. Вы можете писать их со знаками или без. Оттенок выше 360 или ниже 0 оборачивается вокруг круга, так что 390 — то же, что 30.
Практическое применение
Запись файла токенов дизайна
Система дизайна хранит цвета как токены. Многие команды создают цвета в HSL, потому что могут о них рассуждать, и публикуют в hex, потому что его читает каждый инструмент. Конвертируйте HSL в HEX один раз для каждого токена, и опубликованный файл станет тем, чем могут пользоваться все.
Получение цветов для инструментов, не читающих hsl()
Почтовые клиенты, некоторые редакторы документов, старые графические программы и многие библиотеки диаграмм принимают только hex. Всё, что вы вычислили в HSL, нужно конвертировать, прежде чем они смогут это использовать.
Проверка сгенерированной палитры
Скрипт, генерирующий палитру поворотом оттенка, даёт список значений hsl(). Чтобы увидеть их как коды, которые вы поместили бы в таблицу стилей или передали дизайнеру, конвертируйте каждое в hex. Это также позволяет заметить значения, округляющиеся до одного и того же кода и потому не различающиеся на деле.
Передача цвета в сообщении
Код hex короток, копируем и понятен почти всем, кто работает с цветом. Значение hsl() длиннее и менее знакомо за пределами дизайна. Когда вы отправляете цвет кому-то, hex — вежливая форма.
Как конвертировать HSL в HEX здесь
Введите или вставьте значение hsl
Введите цвет в первое поле в форме hsl(30, 29%, 28%) или просто три числа. Оттенок — в градусах, насыщенность и светлота — в процентах.
Прочтите код hex
Ответ появляется сразу, как в hsl(30, 29%, 28%) = #5C4733. Он записан заглавными буквами и со знаком решётки.
Скопируйте его в свою работу
Используйте код в таблице стилей, файле токенов или сообщении. Для обратного направления HEX в HSL — в одном щелчке.
Откуда берутся эти записи
Hex и RGB — одно и то же, записанное дважды
Цвет экрана — это три числа, сколько красного, зелёного и синего света излучать, каждое от 0 до 255, то есть один байт. Hex просто записывает эти байты в шестнадцатеричной системе. Чтобы увидеть числа, конвертируйте HEX в RGB.
HSL и CMYK
HSL изобрели потому, что ни одно из них не читается человеком: оно задаёт оттенок как угол на цветовом круге, с насыщенностью и светлотой в процентах, так что дизайнер может сделать что-либо светлее, не пересчитывая три числа. CMYK принадлежит совершенно другому миру — краске, а не свету. Оно субтрактивно, построено из четырёх печатных форм и не может достичь каждого цвета, который доступен экрану, потому что экран излучает свет, а бумага лишь отражает его.
Ловушки при конвертации HSL в HEX
Ожидание исходного кода обратно
Если вы начали с кода hex, конвертировали его в HSL, ничего не меняли и конвертировали обратно, вы можете получить иной код на шаг-два в стороне. Для одного цвета это незаметно. Для системы дизайна решите, какая форма — мастер, и считайте другую производной.
Путаница насыщенности и светлоты
Их легко перепутать по ошибке: hsl(30, 28%, 29%) — это не hsl(30, 29%, 28%). Порядок — оттенок, насыщенность, светлота. Если цвет на экране выглядит не так, как вы ожидали, проверьте, не поменяли ли вы их.
Забывать, что светлота — не яркость
Два цвета с одинаковой светлотой могут выглядеть по-разному по яркости. Жёлтый при светлоте 50% выглядит намного ярче синего при 50%. Если вы выбираете цвета для текста и фона, проверяйте их контраст настоящим инструментом, а не сравнением чисел светлоты.
Использование значений вне диапазона
Насыщенность и светлота ограничены от 0 до 100 процентов. Значения вне этого диапазона обрезаются. Светлота 120% не ярче белого; это белый.
Вопросы, которые задают перед конвертацией
Чему равен hsl(0, 100%, 50%) в hex?
#FF0000, чистый красный.
Чему равен hsl(0, 0%, 100%) в hex?
#FFFFFF, белый.
Можно ли использовать десятичные дроби?
Да. hsl(30.5, 28.6%, 27.8%) принимается. Результат округляется до целых байтов.
Точна ли конвертация?
Она даёт точные байты для введённых вами чисел, округлённые до целых значений. Обратный путь может оказаться на шаг в стороне, потому что числа HSL были округлены.
Загружается ли мой цвет?
Нет. Арифметика выполняется в вашем браузере, и ничто никуда не отправляется.
Как вернуться?
С помощью HEX в HSL.
Мудрый выбор при конвертации HSL в HEX
Решите, какая форма — мастер
Если вы проектируете в HSL, храните значения HSL как источник и публикуйте hex как вывод. Если бренд даёт вам hex, храните его и используйте HSL только для вариаций. Смешение двух как равных источников и создаёт дрейф.
HSL для вариаций, hex для фиксации
Когда вам нужно семейство оттенков, работайте в HSL. Когда нужно зафиксировать цвет так, чтобы он был идентичен в каждом инструменте, запишите его как hex.
Сохраняйте введённые вами числа
Записывайте значения HSL рядом с hex в заметке о палитре. Если кто-то позже захочет более бледную версию, он сможет начать с ваших чисел, а не с кода, который уже округлён.
Шесть секторов круга
Какой канал высок, какой низок
Конвертация делит круг на шесть секторов по 60 градусов, и в каждом из них один канал на максимуме, один на минимуме, а третий плавно меняется. От 0 до 60 красный на максимуме, синий на минимуме, а зелёный растёт: красный переходит в жёлтый. От 60 до 120 зелёный на максимуме, а красный падает: жёлтый переходит в зелёный. От 120 до 180 зелёный остаётся высоким, а синий растёт: зелёный переходит в голубой. От 180 до 240 синий берёт верх, а зелёный падает. От 240 до 300 синий остаётся высоким, а красный растёт: синий переходит в пурпурный. От 300 до 360 красный снова берёт верх, а синий падает. Когда вы конвертируете HSL в HEX, полезно знать, в каком секторе ваш оттенок, потому что это говорит, какая из трёх пар в ответе будет наибольшей.
Почему у ответа семейное сходство
Цвета одного оттенка и насыщенности, но разной светлоты дают коды hex, похожие на родственников: тот же рисунок того, какая пара высока, а какая низка, только в большем или меньшем масштабе. #5C4733, #7A5F44 и #A38461 — все в одном семействе, с красным наибольшим, затем зелёным, затем синим. Вы можете научиться читать это с первого взгляда, и это облегчает улавливание ошибок.
Построение рампы светлоты
Один оттенок, девять шагов
Очень практичное применение конвертации — построить рампу одного цвета от очень бледного до очень тёмного, такую шкалу, которую системы дизайна обозначают 50, 100, 200 и так далее до 900. Выберите оттенок и насыщенность и пройдите светлотой через значения вроде 96, 90, 80, 70, 60, 50, 40, 30 и 20 процентов. Конвертируйте HSL в HEX для каждого шага, и у вас девять кодов, принадлежащих друг другу. Небольшое снижение насыщенности на краях, на несколько пунктов на самых бледных и самых тёмных шагах, часто выглядит естественнее, чем её постоянство.
Названия шагов
Давайте каждому шагу название, фиксирующее его роль, а не значение: «поверхность» для самого бледного, «граница» для следующего, «текст» для самого тёмного. В коде название сообщает следующему читателю, для чего цвет, и вы можете менять число за ним, не трогая правил, которые его используют.
Светлая и тёмная темы
Зеркальное отражение рампы
Тёмная тема — часто светлая с перевёрнутой рампой: самый бледный шаг, фон страницы в светлой теме, становится самым тёмным фоном в тёмной. Если вы построили рампу в HSL, тёмная тема не стоит вам ничего, кроме второго набора конвертаций. Держите оттенок фиксированным, что сохраняет характер бренда, и слегка подстройте насыщенность, поскольку насыщенные цвета склонны выглядеть резко на тёмном фоне.
Проверка обеих тем
Проверьте каждую пару текста и фона обеих тем на контраст. Цвет, работающий на белом, может не подойти на почти чёрном, а проверка занимает минуту с инструментом контраста и только что полученными кодами hex.
Когда у вас лишь смутное представление о цвете
Начните с круга, затем уточните
Иногда у вас нет кода hex вообще, только идея: спокойный синий, тёплый оранжевый, свежий зелёный. HSL — хорошее место для начала, потому что вы можете выбрать оттенок по ориентирам круга, задать умеренную насыщенность и среднюю светлоту, а затем конвертировать HSL в HEX, чтобы увидеть, что получилось. Если выглядит слишком громко, понизьте насыщенность; если плоско, сдвиньте светлоту. Каждая проба стоит секунды, и вы приходите к коду hex, который можно сразу поместить в таблицу стилей.
Связанные конвертеры
То же семейство инструментов охватывает соседние конвертации. Чтобы вернуться, используйте HEX в HSL. Для чисел, стоящих за кодом, есть HEX в RGB и RGB в HEX, а для печати — HEX в CMYK и CMYK в HEX. Для размеров в той же таблице стилей px в rem делает для длин то, что эта страница делает для цветов.
Разобранный пример
Допустим, вы выбрали зелёный для состояния успеха в приложении: hsl(145, 55%, 38%). Вы вводите его и читаете #2C9658. Вы используете этот код в файле токенов как --success. Для фона уведомления об успехе вы берёте тот же оттенок, hsl(145, 45%, 94%), и читаете #E9F7EF. Для рамки — hsl(145, 45%, 78%), что читается как #AEE0C3. Три кода, один оттенок, все получены за минуту, и каждый — простой код hex, который может открыть любой инструмент в команде.
Краткий контрольный список
Перед конвертацией
Проверьте порядок трёх чисел: оттенок, насыщенность, светлота. Решите, какая форма — ваш мастер.
Во время конвертации
Введите значения, прочтите hex и скопируйте его со знаком решётки.
После конвертации
Посмотрите на цвет на экране в контексте и отметьте значения HSL рядом с кодом на будущее.
Частые ошибки
Перестановка насыщенности и светлоты
Порядок — оттенок, насыщенность, светлота.
Ожидание восстановления старого hex
Он может оказаться на шаг в стороне. Сохраните оригинал, если это важно.
Сравнение светлоты вместо контраста
Используйте инструмент контраста для текста и фона.
Ваши цвета остаются на вашем устройстве
Расчёт происходит локально. Ваши значения используются вашим собственным браузером, и ничто никуда не отправляется. После этого нечего удалять и не нужно создавать аккаунт. Это простой способ конвертировать HSL в HEX.
Итог
Чтобы конвертировать HSL в HEX здесь, введите оттенок в градусах, а насыщенность и светлоту в процентах и сразу прочтите код hex. Конвертация сохраняет цвет так, как его сортирует глаз: оттенок на круге, насколько он насыщен, насколько светел. Две записи описывают одни и те же цвета, но HSL достигает их через другую геометрию, а три его числа округляются до целых градусов и целых процентов, поэтому цвет, переведённый в HSL и обратно, может оказаться на один-два шага от того места, откуда начал. Если вам нужны точные байты, храните hex. Ничего не загружается.