Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion Запускается локально в вашем браузере
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
Конвертер цветов преобразует один цвет между HEX, RGB, HSL и HSV и показывает коэффициент контрастности WCAG по сравнению с черным и белым, чтобы вы могли сразу увидеть, читаем ли текст этого цвета. HEX и RGB — это форматы, которые вы копируете между инструментами, но HSL — это тот формат, который действительно полезен для дизайнерской работы: он отделяет оттенок от яркости, поэтому вы можете создать оттенок или оттенок, который сохраняет тот же оттенок, а не смещается в сторону серого, как это делает наивная математика RGB. Восьмизначные шестнадцатеричные значения и значения rgba содержат альфа-канал, и конвертер также обрабатывает их.
Where people use the
- Преобразование шестнадцатеричного значения бренда в синтаксис RGB, ожидаемый инструментом проектирования.
- Создание последовательного набора оттенков одного оттенка бренда с использованием HSL.
- Проверка читаемости цвета ссылки на темном фоне.
- Сопоставление цвета, выбранного на снимке экрана, с ближайшим шестнадцатеричным значением.
How to use the
- 1
Введите цвет в любом формате
Вставьте шестнадцатеричное значение, например 2f6fed, функцию rgb или hsl или воспользуйтесь средством выбора. Остальные форматы обновляются по мере ввода.
- 2
Прочтите все предложения сразу
Hex, RGB, HSL и HSV показаны вместе с выделенным альфа-каналом.
- 3
Проверьте коэффициенты контрастности
Соотношение черного и белого говорит вам, можно ли использовать этот цвет в качестве цвета текста или фона. Основной текст должен составлять 4,5 к 1, большой текст и границы интерфейса — 3 к 1.
- 4
Скопируйте форму, необходимую вашему коду
Каждое поле имеет собственную кнопку копирования, поэтому вы получаете именно тот синтаксис, который ожидает ваша таблица стилей, вместо того, чтобы переформатировать его вручную.
Советы и лучшие практики
- Отрегулируйте яркость в HSL, а не добавляйте белый или черный в RGB; оттенок остается неизменным.
- Проверьте контрастность при минимальном размере текста, а не при размере заголовка.
- Сохраняйте документированную палитру из пяти или шести значений вместо того, чтобы изобретать новую для каждого компонента.
Часто задаваемые вопросы
Как шестнадцатеричный цвет преобразуется в RGB?
Каждая пара шестнадцатеричных цифр представляет собой один канал, читаемый по основанию 16. В 2f6fed 2f — это 47 красных, 6f — 111 зеленых, а ed — 237 синих. Трехзначное сокращение, такое как f0a, удваивает каждую цифру, поэтому оно становится ff00aa.
Почему яркость HSL — это не то же самое, что воспринимаемая яркость?
Потому что глаз гораздо более чувствителен к зеленому, чем к синему. Чистый синий и чистый желтый могут иметь одинаковую яркость, тогда как желтый выглядит намного ярче. Вот почему контрастность следует измерять по формуле яркости, а не судить по числу HSL.
Что означает четвертая пара цифр шестнадцатеричного цвета?
Альфа: от полностью прозрачного 00 до полностью непрозрачного ff. Восьмизначный шестнадцатеричный код поддерживается во всех современных браузерах и является шестнадцатеричным эквивалентом rgba.
Точно ли преобразование CMYK для печати?
Нет, и никакого браузерного инструмента быть не может. CMYK зависит от чернил, бумаги и профиля принтера. Используйте это значение в качестве отправной точки и конвертируйте все, что имеет значение, с помощью профиля ICC вашего поставщика печати.
Как выбрать читаемый текст для цветного фона?
Сравните коэффициент контрастности между цветом текста и фоном. Если ни черный, ни белый не достигают значения 4,5 к 1, фон слишком насыщен для основного текста, и его необходимо затемнить или осветлить, прежде чем он будет использоваться в тексте.
Почему один и тот же шестиугольник на двух экранах выглядит по-разному?
Потому что дисплеи различаются по гамме, калибровке и яркости. Экран с широкой гаммой отображает насыщенные цвета, которые не может воспроизвести стандартная панель sRGB. Работайте в режиме sRGB, если у вас нет особых причин не делать этого.