Перевести HEX в HSL Hexadecimal ↔ Hue Saturation Lightness Бесплатно Онлайн Безопасно
Введите значение в HEX и сразу прочтите его в HSL. Счёт идёт в вашем браузере, никуда ничего не отправляется, а от чего зависит ответ, написано ниже, а не подразумевается.
Ничего не загружается
Откуда взялись эти записи
Hex и RGB — одно и то же, записанное дважды. Экранный цвет — это три числа: сколько излучить красного, зелёного и синего света, каждое от 0 до 255, то есть байт; hex просто записывает эти байты по основанию шестнадцать, так что #FF8800 и rgb(255, 136, 0) — одно и то же распоряжение одному и тому же пикселю. HSL придумали оттого, что ни то ни другое человеку не читается: он даёт тон как угол на цветовом круге, а насыщенность и светлоту в процентах, и потому дизайнер может сделать что-то светлее, не пересчитывая три числа. CMYK принадлежит совсем иному миру — краске, а не свету. Он вычитающий, построен из четырёх печатных форм и достаёт не до всякого цвета, какой может дать экран, ведь экран излучает свет, а бумага лишь отражает его.
Где они встречаются
Hex — это то, что набирают в таблице стилей и что выдаёт дизайнерский инструмент. RGB появляется всюду, где цвету нужна арифметика: градиенты, прозрачность, код, вычисляющий оттенок. К HSL тянутся, когда палитру подбирают руками, ведь нужные изменения обычно суть изменения одного из трёх его чисел. CMYK — то, чего просит типография, и перевод в него есть тот миг, когда макет перестаёт быть светом и становится краской.
Частые вопросы
Почему мой результат в CMYK не совпадает с типографским?
Потому что единственно верного перевода не существует. Арифметика на этой странице — простая, не зависящая от устройства; это верный ответ, когда нужна отправная точка или грубое соответствие. Типография переводит через цветовой профиль, учитывающий именно эту краску, бумагу и машину, и один и тот же цвет RGB даст на мелованной глянцевой бумаге не те значения CMYK, что на немелованной. Для всего, что обязано совпасть, просите у типографии их профиль, а не доверяйтесь формуле.
Почему некоторые экранные цвета нельзя напечатать?
Потому что эти два не достают до одних и тех же цветов. Экран делает цвет, прибавляя свет, и способен на яркий насыщенный голубой или зелёный, какого краска просто не повторит; бумага делает цвет, поглощая свет, и самое светлое, чем она может быть, — белизна страницы. Множество достижимых цветов называют охватом, и там, где охваты не пересекаются, перевод вынужден выбрать ближайший доступный цвет. Оттого яркий экранный цвет в печати часто выглядит слегка приглушённым.
Ответ точный?
Там, где обе единицы определены одна через другую целыми числами, — да; страница говорит об этом над числом, и единственное округление — в том, сколько знаков показано. Там, где отношение не имеет конечной десятичной записи, страница показывает двенадцать значащих цифр и называет соотношение приближённым, а не делает вид, что это не так.
Уходит ли с моего устройства что-нибудь из набранного?
Нет. Счёт идёт в вашем браузере; ничего не отправляется, да и некуда — сервера для этого нет. Загрузите страницу один раз, и она работает с выключенной сетью.
Зачем конвертировать HEX в HSL
Код hex вроде #5A4632 — прекрасный способ хранить цвет и плохой способ думать о нём. Ничто в цифрах не говорит вам, что цвет — коричневый, насколько он ярок или как выглядела бы чуть более бледная его версия. HSL изобрели, чтобы это исправить. Оно описывает цвет так, как люди склонны о нём говорить: какой это оттенок, насколько он насыщен и насколько светел. Конвертировать HEX в HSL — значит перевести цвет из формы, которую вам выдаёт инструмент дизайна, в форму, с которой можно рассуждать: hsl(30, 29%, 28%) — это тёмный, приглушённый оранжево-коричневый, и вы сразу видите, что увеличение последнего числа сделает его бледнее.
Вот настоящая причина, по которой дизайнеры и фронтенд-разработчики пользуются этой конвертацией. У них есть фирменный цвет в hex, и им нужно семейство связанных цветов: более светлый для состояния при наведении, более тёмный для нажатой кнопки, очень бледный для оттенка фона, обесцвеченный для отключённого элемента. В hex каждый из них — новая охота за тремя парами цифр. В HSL каждый — изменение одного числа. Цвет тот же самый, увиденный через более полезную линзу.
Эта страница конвертирует в вашем браузере, и ничего не загружается. Ниже вы найдёте, как три числа HSL вычисляются из цифр hex, что конвертация сохраняет и где она округляет, что на практике означают оттенок, насыщенность и светлота, как дизайнеры используют HSL для построения палитр и состояний и ловушки, в которые попадают те, кто конвертирует HEX в HSL впервые.
Что описывает HSL
Оттенок: положение на цветовом круге
Оттенок — это угол от 0 до 360 градусов по цветовому кругу. Красный находится на 0, жёлтый на 60, зелёный на 120, голубой на 180, синий на 240 и пурпурный на 300; на 360 вы возвращаетесь к красному. Оттенок 30 лежит между красным и жёлтым, то есть это оранжевый. Число говорит, в каком семействе цветов вы находитесь, и ничего не говорит о том, насколько он ярок или бледен.
Насыщенность: насколько ярок
Насыщенность — это процент. При 100% цвет настолько чист, насколько позволяет оттенок; при 0% он потерял весь цвет и стал серым. Насыщенность 29%, как в нашем примере коричневого, — приглушённый, землистый цвет. Понижение насыщенности — самый быстрый способ сделать громкий цвет спокойнее, не меняя его характера.
Светлота: насколько бледен или тёмен
Светлота — тоже процент. При 0% цвет чёрный независимо от оттенка и насыщенности; при 100% он белый; при 50% это полный, обычный цвет. Наш коричневый на 28% — на тёмной стороне. Повышение числа даёт более бледную версию того же цвета, а понижение — более тёмную, и это именно та перемена, которая дизайнерам нужна чаще всего.
Почему это проще, чем hex
В hex чтобы сделать цвет бледнее, нужно увеличить все три пары на разные величины так, чтобы оттенок не сместился, что почти невозможно сделать на глаз. В HSL это значит изменить одну цифру и оставить две другие в покое.
Как работает конвертация
От трёх байтов к углу и двум процентам
Конвертер сначала читает цифры hex как значения красного, зелёного и синего, каждое от 0 до 255, и масштабирует их до значений между 0 и 1. Он находит наибольшее и наименьшее из трёх. Светлота — среднее из двух. Насыщенность зависит от того, насколько они далеки друг от друга, относительно светлоты. Оттенок зависит от того, какой канал наибольший и как соотносятся два других. Если все три равны, цвет серый, насыщенность равна нулю, а у оттенка нет смысла; конвертер тогда показывает для него 0.
Пример
Для #5A4632 байты — 90, 70 и 50. Красный наибольший — 0.353, синий наименьший — 0.196. Светлота — половина их суммы, 0.275, около 28%. Разброс — 0.157, поэтому насыщенность — 0.157, делённые на сумму 0.549, около 29%. Красный — наибольший канал, а зелёный лежит между, что ставит оттенок на 30 градусов. Результат — hsl(30, 29%, 28%).
Целые числа
Три числа округляются до целых градусов и целых процентов, когда их записывают. Это форма, которой пользуются люди и которую CSS ожидает в повседневной работе, но она означает, что часть информации отбрасывается в последней цифре, как объясняет следующий раздел.
Что конвертация сохраняет и чего не может
Она сохраняет цвет так, как его сортирует глаз
Результат — цвет так, как его сортирует глаз: оттенок на круге, насколько он насыщен, насколько светел. Поэтому HSL стоит иметь. Вы можете сделать цвет бледнее или оттенок темнее, изменив одно число, что почти невозможно в hex.
Она не может пообещать те же байты обратно
Оба описывают одни и те же цвета, но HSL достигает их через другую геометрию, а три его числа округляются до целых градусов и целых процентов при записи. Поэтому цвет, переведённый в HSL и обратно, может оказаться на один-два шага от того места, откуда начал: визуально тот же, но не байт в байт. Если вам нужны точные байты обратно, храните hex. Конвертируйте HEX в HSL, чтобы работать с цветом, и храните hex как мастер.
У серых нет оттенка
Когда три байта равны, об оттенке нечего сказать. Конвертер даёт оттенок 0 и насыщенность 0%, а серый описывает одна лишь светлота. Не вкладывайте никакого смысла в 0.
Использование HSL на практике
Построение семейства оттенков
Возьмите базовый цвет hsl(30, 29%, 28%). Более светлый оттенок для наведения — hsl(30, 29%, 34%). Очень бледный светлый тон для фона — hsl(30, 29%, 94%). Более тёмный оттенок для нажатых состояний — hsl(30, 29%, 22%). Оттенок и насыщенность остаются на месте, поэтому цвета явно принадлежат друг другу. То же в hex потребовало бы нескольких попыток и всё равно выглядело бы слегка не так.
Темы и тёмный режим
Теме часто нужна та же палитра в светлой и тёмной версии. С HSL вы сохраняете оттенок и подстраиваете светлоту и насыщенность: осветляете фоны и затемняете текст для светлой темы, а для тёмной — наоборот. Определить оттенок как пользовательское свойство и менять только светлоту — распространённый и аккуратный способ сделать это.
Генерация палитр
Чтобы найти цвета, подходящие к базовому, поверните оттенок. Тридцать градусов в любую сторону дают аналогичные цвета, 180 даёт дополнительный, а 120 или 240 дают триаду. Зафиксируйте насыщенность и светлоту, измените оттенок, и у цветов будет единообразное ощущение. Это быстрый способ начать палитру, не выглядящую случайной.
Доступный контраст
Светлота — главный регулятор контраста. Если текст трудно читать на цветном фоне, исправление обычно в увеличении разницы светлоты между ними, а HSL превращает это в подстройку одного числа с каждой стороны.
Как конвертировать HEX в HSL здесь
Введите или вставьте код hex
Введите цвет в первое поле, со знаком решётки или без. Принимаются трёх- и шестизначные формы, а также читается восьмизначная форма с прозрачностью.
Прочтите значение hsl
Ответ появляется сразу, как в #5A4632 = hsl(30, 29%, 28%). Три числа — оттенок в градусах, а насыщенность и светлота — в процентах.
Скопируйте его в таблицу стилей
Используйте результат как есть, в правиле вроде color: hsl(30, 29%, 28%). Чтобы подправить цвет, измените последнюю цифру. Инструмент для обратного направления — HSL в HEX.
Откуда берутся эти записи
Hex и RGB — одно и то же, записанное дважды
Цвет экрана — это три числа, сколько красного, зелёного и синего света излучать, каждое от 0 до 255, то есть один байт. Hex просто записывает эти байты в шестнадцатеричной системе. Чтобы увидеть числа, конвертируйте HEX в RGB.
HSL и CMYK
HSL изобрели потому, что ни одно из них не читается человеком: оно задаёт оттенок как угол на цветовом круге, с насыщенностью и светлотой в процентах, так что дизайнер может сделать что-либо светлее, не пересчитывая три числа. CMYK принадлежит совершенно другому миру — краске, а не свету. Оно субтрактивно, построено из четырёх печатных форм и не может достичь каждого цвета, который доступен экрану, потому что экран излучает свет, а бумага лишь отражает его.
Ловушки при конвертации HEX в HSL
Ожидание идеального кругового пути
Из-за округления конвертация обратно может дать код на один-два шага от исходного. Для одного цвета это незаметно. Для системы дизайна, где многие цвета конвертируются туда и обратно, это может накапливаться. Держите hex как источник.
Предположение, что равная светлота означает равную яркость
Два цвета с одинаковой светлотой HSL могут выглядеть довольно по-разному по яркости: жёлтый на 50% выглядит намного ярче синего на 50%. Светлота HSL — удобное число, а не мера воспринимаемой яркости. Для проверок контраста используйте настоящий инструмент контраста.
Забытые знаки процента
В CSS насыщенность и светлота в hsl() несут знаки процента, а оттенок — простое число или число с deg. Пропуск знаков — классическая ошибка.
Слишком много смысла в сером
У серого нет оттенка. Если конвертер показывает для него 0, это не значит, что он красноватый.
Вопросы, которые задают перед конвертацией
Чему равен #FF0000 в HSL?
hsl(0, 100%, 50%), чистый красный.
Чему равен #FFFFFF в HSL?
hsl(0, 0%, 100%), белый. Оттенок для белого бессмыслен, и конвертер показывает 0.
Поддерживается ли HSL везде?
Все современные браузеры понимают hsl() и hsla(). Он в CSS уже много лет.
Точна ли конвертация?
Она точна в том смысле, что описывает тот же цвет, но числа округляются до целых градусов и процентов, поэтому возврат может оказаться на шаг в стороне.
Загружается ли мой цвет?
Нет. Арифметика выполняется в вашем браузере, и ничто никуда не отправляется.
Как вернуться?
С помощью HSL в HEX.
Мудрый выбор при конвертации HEX в HSL
Используйте HSL для работы, hex для хранения
Держите мастер-палитру в hex, где она однозначна, и используйте HSL, когда хотите создавать вариации. Круговые пути немного теряют; мастер — нет.
Рассмотрите новые цветовые пространства
CSS теперь предлагает oklch() и подобные записи, в которых равная светлота действительно выглядит равной. Их стоит изучить для новых систем дизайна. HSL остаётся записью, которую понимают почти все и которую поддерживает каждый инструмент.
Используйте пользовательские свойства
Определите --hue, --sat и --light и стройте из них цвета: hsl(var(--hue) var(--sat) var(--light)). Тема тогда меняется правкой нескольких чисел.
Уверенное чтение и запись HSL
Несколько ориентиров, которые стоит помнить
Несколько чисел облегчают чтение HSL. Оттенки, кратные 60, — чистые цвета: 0 красный, 60 жёлтый, 120 зелёный, 180 голубой, 240 синий, 300 пурпурный. Светлота 50 с насыщенностью 100 даёт чистейшую версию любого оттенка, а светлота 95 или выше — тон настолько бледный, что годится для фона. Когда вы конвертируете HEX в HSL и видите оттенок возле одного из этих ориентиров, вы можете назвать семейство цвета с первого взгляда.
Переход между семействами
Прибавление 180 к оттенку даёт цвет напротив на круге, то есть дополнительный, и обычно самый сильный контраст. Прибавление или вычитание 30 даёт соседа, комфортно располагающегося рядом с исходным. Дизайнеры используют эти шаги, чтобы подбирать акценты, подходящие к фирменному цвету, без угадывания.
Ведение записи конвертированных значений
Когда вы конвертируете HEX в HSL для палитры, запишите результаты в таблицу с исходным hex рядом. Таблица показывает, как цвета связаны, а если оттенок или светлота выбиваются из ряда остальных, странность видна сразу. Она также даёт вашей команде общую справку.
Проверка на реальных экранах
Цвета, выглядящие сбалансированно на откалиброванном мониторе, могут выглядеть иначе на телефоне на солнце или на дешёвом ноутбуке. Проверьте готовую палитру хотя бы на двух устройствах и слегка подправьте светлоту, если бледные тона пропадают на одном из них.
Связанные конвертеры
То же семейство инструментов охватывает соседние конвертации. Чтобы вернуться, используйте HSL в HEX. Для чисел, стоящих за кодом, есть HEX в RGB и RGB в HEX, а для печати — HEX в CMYK и CMYK в HEX. Для размеров в той же таблице стилей px в rem и px в em делают для длин то, что эта страница делает для цветов.
Разобранный пример
Допустим, ваш фирменный цвет — #1E7A5C. Вы конвертируете HEX в HSL и читаете hsl(160, 61%, 30%). Для состояния при наведении вы пишете hsl(160, 61%, 36%), чуть светлее. Для нажатого состояния — hsl(160, 61%, 24%). Для очень бледного фона за уведомлением — hsl(160, 40%, 95%). Для отключённой кнопки — hsl(160, 12%, 60%), тот же оттенок с вынутой большей частью цвета. Пять цветов, один оттенок, написаны за минуту, и все выглядят так, будто принадлежат друг другу. Когда фирменный цвет меняется, вы меняете число оттенка один раз.
Краткий контрольный список
Перед конвертацией
Решите, что вы хотите сделать с цветом: варьировать его, оформить в тему или просто прочесть.
Во время конвертации
Вставьте hex, прочтите hsl и отметьте три числа.
После конвертации
Делайте вариации, меняя по одному числу за раз, и смотрите на них на реальном фоне.
Частые ошибки
Считать округлённые числа точными
Это целые числа. Храните hex как мастер.
Отождествление светлоты с яркостью
Два цвета с одной светлотой могут сильно различаться по тому, насколько ярко выглядят.
Пропуск знаков процента
Насыщенности и светлоте они нужны в CSS.
Ваши цвета остаются на вашем устройстве
Расчёт происходит локально. Ваши значения используются вашим собственным браузером, и ничто никуда не отправляется. После этого нечего удалять и не нужно создавать аккаунт. Это простой способ конвертировать HEX в HSL.
Итог
Чтобы конвертировать HEX в HSL здесь, введите или вставьте код hex и сразу прочтите значение hsl. Конвертация сохраняет цвет так, как его сортирует глаз: оттенок на круге, насколько он насыщен, насколько светел. Поэтому HSL стоит иметь, ведь вы можете сделать цвет бледнее или оттенок темнее, изменив одно число, что почти невозможно в hex. Оба описывают одни и те же цвета, но HSL достигает их через другую геометрию, а три его числа округляются до целых градусов и целых процентов, поэтому цвет, переведённый в HSL и обратно, может оказаться на один-два шага от того места, откуда начал. Если вам нужны точные байты обратно, храните hex. Ничего не загружается.