Перейти к содержанию
TextArray
100% локально

Конвертер цветов

Преобразуйте цвета между HEX, RGB и HSL с помощью альфа-канала и палитры оттенков.

Входные данные
4
Выходные данные

Конвертер цветов

Вставьте цвет в любой форме, которую понимает CSS — #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) — и два других цвета вернутся мгновенно. Короткий шестнадцатеричный код, такой как #f00, расширяется, начальный хэш не является обязательным, а старый синтаксис запятой и новый синтаксис пробелов считываются без указания того, какой из них вы использовали. Поместите один цвет в строку, и вся палитра преобразуется сразу, а это именно то, что вам нужно, когда передача дизайна поступает в виде столбца шестнадцатеричных кодов, а ваша таблица стилей написана на HSL.

Альфа выживает в путешествии, как бы вы его ни написали: rgba(59, 130, 246, 0,5), rgb(59 130 246 / 50%) и 8-значный шестнадцатеричный код #3b82f680 описывают один и тот же полупрозрачный синий цвет, и каждый преобразуется в другие. Отключите «Сохранить альфа-канал», если вам нужен только непрозрачный цвет. Меню выходного формата сужает результат до шестнадцатеричного, RGB или HSL — это удобно для объемных списков, а меню синтаксиса выбирает между rgb(255, 0, 0) и rgb(255 0 0 / 0,5), поэтому то, что вы копируете, вставляется прямо в уже имеющуюся у вас кодовую базу. Шестнадцатеричный регистр верхнего регистра находится на расстоянии одного флажка.

Включите палитру оттенков, и каждый цвет получит таблицу более светлых и темных вариантов, равномерно смешанных в сторону белого и в сторону черного. Это быстрый способ получить состояния наведения, границы и отключенные стили из одного фирменного цвета, не открывая инструмент дизайна. Выберите от одного до восьми шагов на каждую сторону; базовый цвет находится посередине с 0%.

Все работает в вашем браузере — ни загрузка, ни обмен данными с сервером, ни учетная запись. Невыпущенные фирменные цвета останутся на вашей машине. Линии, не являющиеся цветами, остаются на месте в качестве комментария CSS и учитываются при подсчете, поэтому одна опечатка никогда не скроет остальную часть длинного списка. Именованные цвета CSS, такие как rebeccapurple, не поддерживаются; сначала преобразуйте их в шестнадцатеричный формат.

FAQ

Какие цветовые обозначения он читает?
Шестнадцатеричный 3-, 4-, 6- и 8-значный код с начальным хешем или без него; rgb() и rgba(); hsl() и hsla(). Синтаксис запятой и пробела работает, а оттенок принимает градусы, рады, грады и повороты. Именованные цвета, такие как rebeccapurple, не поддерживаются.
Как обрабатывается альфа-канал?
Альфа считывается из четвертого аргумента, из косой черты и из 8-значного шестнадцатеричного числа, а затем выводится обратно в выбранном вами обозначении. Отключите «Сохранить альфа-канал», чтобы вместо этого получить непрозрачный цвет.
Почему цвет смещается на одну цифру при обратном преобразовании?
HSL печатается в целых градусах и целых процентах, поэтому повторное чтение этого округленного значения может привести к соседнему 8-битному цвету: hsl(217, 91%, 60%) возвращается как #3c83f6, а не #3b82f6. Браузеры обходятся таким же образом. Используйте шестнадцатеричный код в качестве источника истины, когда важен точный байт.
Что делает оттеночная палитра?
Он смешивает цвета с белым и с черным с равномерными шагами яркости и перечисляет каждый вариант, поэтому вы можете создавать наведение, рамку и отключенные оттенки из одного базового цвета. Выберите от одного до восьми шагов на каждую сторону.
Мой текст где-нибудь загружен?
Нет. Преобразование выполняется полностью в вашем браузере, и ничего из того, что вы вставляете, не покидает ваше устройство.