название: & quot;Конвертер цвета: Конвертировать HEX, RGB, HSL, HWB и CMYK в правильном направлении & quot; slug: инструмент color-converter-guide: color-converter категория: тип цвета: кластер
Преобразователь цвета: конвертируйте HEX, RGB, HSL, HWB и CMYK в правильном направлении
Первый раз цвет укусил меня был на тираже. я построил целевую страницу для одного из моих продуктов WordPress, подписался на бренд синий в браузере, а затем отправил тот же "blue" в типографию для партии стикеров. то, что вернулся был плоский, слегка серый темно-синий, который не выглядел как экран. Никто не преобразовал цвет экрана RGB в CMYK, так что принтер догадался, и предположение было неправильным. Это был день, когда я перестал относиться к цвету как к одной строке и начал относиться к нему как к одному значению, которое должно быть произнесено сразу на нескольких языках.
Это именно то, для чего предназначен преобразователь цвета. Вы даете ему цвет в одном синтаксисе, и он возвращает вам любой другой синтаксис, поэтому синий цвет в вашем CSS, синий цвет в файле дизайна и синий цвет, который получает ваш принтер, - все это доказуемо один и тот же цвет. Я построил преобразователь цвета на Toolz.dev потому что мне надоело вставлять шестигранные коды в три разных сайта, чтобы получить RGB, HSL и CMYK отдельно.
TL;DR: Преобразователь цвета берет один цвет и повторно выражает его в HEX, RGB, HSL, HWB, и CMYK сразу, плюс ближайший CSS имя цвета. использовать RGB и HEX для экранов, HSL или HWB, когда вы хотите подтолкнуть цвет вручную, и CMYK для печати.Toolz.dev конвертер работает полностью в вашем браузере, сохраняет альфа-канал нетронутым, и никогда не загружает то, что вы вставляете.
Что такое преобразователь цвета?
Преобразователь цвета анализирует цвет, записанный в любом общем синтаксисе CSS, и вычисляет его эквивалент в других. Какие синтаксисы существуют и как именно каждый преобразуется, определяется Цветовой модуль CSS, уровень 4. Математика несложная, но делать это вручную утомительно и подвержено ошибкам. Конвертируя #4466EE для RGB означает разделение шести шестнадцатеричных цифр на три пары и чтение каждой пары как числа по основанию 16: 44 68 лет, 66 составляет 102, и EE это 238, дающий rgb(68, 102, 238). Идти другим путем означает разделить каждый канал на двузначную шестнадцатеричную строку и соединить их. Добраться до HSL означает нормализовать каналы, найти минимум и максимум и вычислить оттенок, насыщенность и легкость от тех. Вы не хотите делать это в вашей голове в 2 часа ночи.
Значение конвертера - это не просто экономия арифметики. это гарантия согласованности. когда один инструмент производит все форматы из одного проанализированного цвета, нет шансов, что скопированный вами RGB и скопированный вами HSL описывают немного разные цвета, потому что вы округляете по-разному между шагами.Один источник, одна истина, каждый формат.
Почему вообще существуют цветовые форматы?
Каждый цветовой формат сохранился, потому что он действительно хорош в одной работе.
RGB - это то, как работают экраны. Дисплей излучает красный, зеленый и синий свет, и смешивание этих трех с разной интенсивностью дает каждый цвет, который вы видите. Это делает RGB родным языком браузера: какой бы синтаксис вы ни написали в CSS, механизм рендеринга разрешает его RGB, прежде чем он зажжет пиксель.
HEX - это сокращенно RGB. #4466EE является таким же, как rgb(68, 102, 238), просто упакованный в компактную строку, которая легко вставить в таблицу стилей или инструмент дизайна. Он популярен, потому что он короткий и однозначный, а не потому, что он более способен.
HSL описывает цвет по оттенку, насыщенности и легкости. Это формат, к которому я обращаюсь, когда вручную настраиваю пользовательский интерфейс. Чтобы сделать кнопку темнее при наведении, я опускаю светлость на несколько точек и оставляю только оттенок и насыщенность. Попытка сделать это в необработанном RGB означает изменить все три канала на неравные величины и надеяться, что оттенок не дрейфует.
HWB, определенный в спецификации цветового модуля CSS уровня 4 (https://www.w3.org/TR/css-color-4/), описывает тот же оттенок по тому, сколько белого и сколько черного смешивается в. Он чисто отображает, как люди на самом деле думают о оттенках и оттенках: добавить белый к светлому, добавить черный к темному. Это более новый, поэтому я использую его в основном, когда читаемость кода имеет большее значение, чем охват браузера.
CMYK - это модель печати. Принтеры укладывают голубые, пурпурные, желтые и черные чернила на белую бумагу, и каждый чернил вычитает свет, а не добавляет его. Вот почему яркий цвет экрана может выглядеть более тусклым на бумаге: диапазоны цветов, которые могут производить две модели, называемые гаммами, различны. Конвертер дает вам приближение CMYK, но он не может изобрести чернила, которых не существует.
Как конвертировать HEX в RGB и обратно?
Наиболее распространенным преобразованием с большим отрывом является HEX в RGB и RGB в HEX. Вот ручной метод, позволяющий проверить работоспособность любого инструмента, включая мой.
Чтобы преобразовать HEX в RGB, разделите шесть цифр на три пары и прочитайте каждую как шестнадцатеричное число от 0 до 255. Трехзначное сокращение нравится #46E расширяется за счет удвоения каждой цифры #4466EE во-первых. Чтобы преобразовать RGB в HEX, возьмите каждое значение канала, преобразуйте его в двузначную шестнадцатеричную строку с ведущим нулем, если необходимо, и соедините их за хешем.
Вместо того, чтобы делать это повторно, вставьте значение в преобразователь цвета и читайте каждый формат сразу. Если вам также нужно визуально выбрать цвет и увидеть его обновление вживую, цветосборщик является лучшей отправной точкой, и эти два инструмента имеют одно и то же ядро преобразования, поэтому их количество совпадает.
Когда мне следует использовать CMYK вместо RGB?
Используйте CMYK только тогда, когда вывод чернила на бумаге Визитные карточки, наклейки, упаковка, и любое коммерческое задание печати ожидают значения CMYK, и отправка RGB на принтер означает, что принтер или его программное обеспечение преобразует для вас, часто с результатами, которые вы не подписали Это было моей ошибкой наклейки в предложении.
Используйте RGB и его сокращение HEX для всего, что будет отображаться на экране: веб-сайты, приложения, социальная графика, видео. Если проект охватывает оба мира, сохраните RGB или HEX в качестве источника истины и сгенерируйте приближение CMYK с помощью конвертера в момент передачи для печати, чтобы вы могли увидеть значения CMYK и отметить любой цвет, который сильно изменится, прежде чем это будет стоить вам тиража.
Как соотносятся цветовые форматы?
| формат | лучше для | Поддержка Альфа | пример |
|---|---|---|---|
| гекс | Компактный CSS, передача конструкции | Только 8-значная форма | #4466EE |
| РГБ/РГБА | Экраны, программный цвет | Да (РГБА) | rgb(68, 102, 238) |
| HSL/HSLA | Ручной настройка оттенка и легкости | Да (HSLA) | hsl(228, 83%, 60%) |
| HWB | Читаемые оттенки и оттенки | Да (со слэш-альфой) | hwb(228 27% 7%) |
| CMYK | Печать, чернила на бумаге | нет | cmyk(71%, 57%, 0%, 7%) |
Таблицу стоит иметь в виду, поскольку она четко отображает рабочий процесс: проектирование в HEX или визуальный выбор, настройка в HSL или HWB, доставка на экраны в RGB или HEX и преобразование в CMYK только на границе печати.
Как прозрачность перемещается между форматами?
Альфа - это то, где множество преобразований тихо идут не так. альфа-канал контролирует непрозрачность, от 0 (полностью прозрачный) до 1 (полностью непрозрачный). RGBA и HSLA несут его как четвертое значение, а 8-значный HEX несет его как четвертую пару: #4466EECC это синий цвет примерно на 80 процентов непрозрачности, потому что CC составляет 204 из 255. Plain HEX и cmyk() вообще не иметь альфа-канала.
Конвертер Toolz.dev сохраняет альфа через каждый формат, который поддерживает его. если вы вставите rgba(0, 0, 0, 0.5) ты получаешь #00000080 в строке HEXA и hsla(0, 0%, 0%, 0.5) в строке HSLA, все описывающие один и тот же полупрозрачный черный, Когда вы копируете простой HEX или строку CMYK вместо этого, вы копируете полностью непрозрачный цвет, который является преднамеренным выбором, а не ошибкой: эти форматы не могут выразить непрозрачность, поэтому они показывают цвет, как если бы он был твердым, Когда прозрачность имеет значение, копировать из строки, поддерживающей альфа.
Могу ли я преобразовать имя цвета CSS?
Да, и это работает в обоих направлениях. Введите ключевое слово, такое как tomato, rebeccapurple, или slategray и конвертер разрешает его на HEX, RGB, HSL, HWB и CMYK. Полный набор из 148 названных цветов взят из спецификации цветового модуля CSS уровня 4, поэтому значения точно соответствуют тому, что решает браузер.
Идти другим путем - это то, где это становится действительно полезным Вставить числовой цвет и конвертер сообщает точное имя CSS, если один совпадает, и всегда показывает ближайший именованный цвет по RGB расстояние, когда это не. Это ближайшее совпадение удобно для именования переменных и записи читаемых документов дизайна: #663399 возвращается как rebeccapurpleи что-то близкое к этому возвращается как & quot;ближайший: rebeccapurple" так что вы знаете, в каком районе вы находитесь.
Как это соответствует реальному рабочему процессу проектирования?
Вот как я на самом деле использую цвет в проекте и где подходит каждый инструмент.
Я начинаю с выбора основного цвета, обычно визуально с цветосборщик. Как только у меня появится синий цвет, я проведу его через преобразователь цвета чтобы заблокировать значения HEX, RGB, HSL и CMYK в одном месте, я вставляю их в документ системы проектирования, чтобы каждый товарищ по команде и каждый поставщик работали с одинаковыми номерами.
Затем я строю палитру. поддерживающие оттенки возникают из-за подталкивающей легкости в HSL, и я проверяю каждую пару текст на фоне с помощью проверка контрастности цвета таким образом, палитра доступна до того, как она отправится, а не после жалобы. Когда мне нужен фон, я подаю два из этих цветов в генератор градиента, йо-
Наконец, для обеспечения гибкого расстояния и типографики вокруг всего этого цвета я сочетаю палитру с палитрой Генератор зажима CSS так что размеры масштабируются так же гладко, как цвета согласованы Цвет и макет - это две половины одного и того же полирования.
Если вас волнует, куда идут ваши данные во время работы, стоит прочитать, как эти инструменты с ними обращаются. Все в преобразователе цвета работает на стороне клиента, о выборе дизайна я написал в руководство по конфиденциальности данных в онлайн-инструментах, и он находится рядом с остальной частью моего ежедневного набора Набор инструментов для веб-разработчиков, йо-
Достаточно ли он точен для производства?
Для работы на экране, да, без квалификации. HEX, RGB, HSL, и HWB все являются точными представлениями одного и того же цвета sRGB, поэтому преобразование между ними туда и обратно чисто: преобразовать цвет в HSL и обратно и вы приземляетесь на одну и ту же тройку RGB, дать или взять одну единицу округления на канале. что округление присуще представлению непрерывного цвета в целых каналах, а не дефекта в каком-либо одном инструменте.
Для CMYK, рассматривать вывод как твердое, стандартное приближение, а не доказательство с цветовым управлением. истинный цвет печати зависит от конкретной бумаги, чернил и ICC профиля, который использует ваш принтер, который не может знать ни один браузерный инструмент. конвертер использует стандартную наивную формулу CMYK, которая является именно тем, что большинство инструментов дизайна показывают по умолчанию и является надежной отправной точкой. когда работа является критической к цвету, получить физическое доказательство от принтера перед полным прогоном. Это урок, который мои наклейки серого темно-синего цвета преподали мне, и это дешевле, чтобы выучить из этого параграфа, чем из коробки неправильных наклеек.
А как насчет новых цветовых пространств, таких как LAB и OKLCH?
Если вы внимательно следите за CSS, вы видели lab(), lch(), oklab(), и oklch() появляясь в таблицах стилей и инструментов дизайна, Они приходят из спецификации цветового модуля CSS уровня 4 и они решают реальную проблему: RGB, HSL, и HWB все привязаны к модели экрана sRGB, поэтому два цвета, которые выглядят одинаково отличаясь от глаза могут быть очень разными числовыми расстояниями друг от друга, и широкогамут дисплей может показать цвета, которые sRGB просто не может описать.OK цветовые пространства перцептивно однородны, что делает их превосходными для создания равномерно ступенчатых палитр и для интерполяции градиентов, которые не мутнеют посередине.
Я намеренно сосредоточил внимание этого конвертера на форматах, которые вы вставляете в повседневное производство CSS и передаете принтерам: HEX, RGB, HSL, HWB и CMYK. Это набор, который охватывает подавляющее большинство реальных задач, и каждый из них четко отображается в один и тот же цвет sRGB, поэтому преобразования между ними точны и обратимы. Пространства с более широкими гаммами включают решения по сопоставлению гаммм, которые легко получить тонко неправильно, и смешивание их в простой конвертер приведет к четкости покрытия, которое не нужно большинству людей.
Практическое правило, которому я следую: достигайте OKLCH, когда вы алгоритмически генерируете палитру или градиент и хотите воспринимаемо ровные шаги, и оставайтесь с HEX, RGB и HSL для повседневной работы над написанием компонентов. Когда вы выполняете проектирование в OKLCH, перед передачей преобразуйте полученные цвета якоря в HEX или RGB с помощью вашего инструмента проектирования, чтобы значения в вашей таблице стилей были такими же, как этот конвертер и ваши товарищи по команде могли читать.
Часто задаваемые вопросы
Как конвертировать HEX в RGB?
Разделите шестизначный HEX-код на три пары и читайте каждую как шестнадцатеричное число от 0 до 255.В #4466EE, 44 68 (красный), 66 составляет 102 (зеленый), и EE это 238 (синий), дающий rgb(68, 102, 238). Вставьте код HEX в конвертер, и значение RGB появится сразу рядом с любым другим форматом.
Как конвертировать RGB в HEX?
Преобразуйте каждое из красных, зеленых и синих значений (от 0 до 255) в двузначное шестнадцатеричное число и присоединяйте их после хеширования. rgb(68, 102, 238) становиться #4466EE. Преобразователь делает это мгновенно, а также дает вам 8-значную форму HEXA при наличии значения альфа.
В чем разница между HSL и HWB?
HSL описывает цвет по оттенку, насыщенности и светлоте, а HWB описывает тот же оттенок по тому, сколько белого и сколько черного в него смешано. HWB часто более интуитивно понятен для оттенков и оттенков: увеличение белизны осветляет цвет, а увеличение черноты затемняет его. Оба соответствуют точно такому же значению RGB, поэтому вы можете свободно переключаться между ними.
Когда мне следует использовать CMYK вместо RGB?
Используйте CMYK для печати и RGB для экранов. CMYK - это субтрактивная модель, основанная на голубых, пурпурных, желтых и черных чернилах, поэтому это то, что ожидают коммерческие принтеры. RGB является аддитивным и описывает свет, излучаемый дисплеями. Цвет экрана имеет приближение CMYK, но две гаммы различаются, поэтому яркие цвета экрана могут выглядеть более тусклыми в печати.
Поддерживает ли конвертер прозрачность?
Да. Укажите значение альфа через rgba(), hsla(), или 8-значный HEX и непрозрачность сохраняется в каждом альфа-ориентированном выходе Форматы без альфа-канала, такие как простой HEX и cmyk(), показывать полностью непрозрачный цвет, так что проверьте вывод RGBA или HEXA, когда прозрачность имеет значение.
Могу ли я преобразовать имя цвета CSS?
Да. Введите ключевое слово CSS, такое как tomato, rebeccapurple, или slategray и преобразователь разрешает его на HEX, RGB, HSL, HWB и CMYK. Он также работает наоборот: вставить числовой цвет и сообщить точное имя CSS, если оно совпадает, плюс ближайший именованный цвет для справки.
Является ли преобразователь цвета бесплатным и приватным?
Да. конвертер полностью свободен без регистрации, без ограничений и водяных знаков. Все анализы и преобразования выполняются в вашем браузере с использованием JavaScript на стороне клиента, поэтому введенные вами цвета никогда не покидают ваше устройство, и инструмент продолжает работать в автономном режиме после загрузки страницы.
