CodeKitHubЧто это за инструмент?
Инструмент выбора цвета преобразует визуальный выбор — этот оттенок синего, именно этот пиксель в логотипе — в числовые коды, понятные программному обеспечению. Один и тот же цвет имеет несколько эквивалентных обозначений: HEX (#3b82f6) преобладает в CSS и при передаче дизайнерских материалов, RGB (59, 130, 246) соответствует тому, как цвет отображается на экранах и в коде, а HSL (217°, 91%, 60%) описывает оттенок, насыщенность и яркость так, чтобы человек мог их понять.
Вторая часть инструмента представляет собой пипетку для выбора цвета из изображения. Загрузите скриншот, логотип или фотографию и щелкните в любой точке, чтобы определить цвет под курсором — это стандартный способ ответить на вопрос «Какой именно это цвет?». Если браузер поддерживает API EyeDropper, используется встроенная лупа с функцией увеличения; в других браузерах инструмент считывает значение пикселя из копии изображения, сохраненной на холсте. В обоих случаях обработка происходит локально: изображение никуда не загружается.
Зачем его использовать?
- Три формата сразу: каждый выбранный цвет отображается одновременно в форматах HEX, RGB и HSL, причем для каждого из них предусмотрена кнопка копирования одним щелчком — отдельного преобразования не требуется.
- Выбор из изображения: загрузите любую картинку и щелкните мышью, чтобы определить точный цвет пикселя — идеально подходит для извлечения фирменных цветов из логотипа или подбора цвета, видимого на скриншоте.
- Использует встроенный инструмент «Пипетка» браузера с функцией увеличения, если он доступен, а в остальных случаях переключается на точное считывание пикселей с холста.
- Образец с динамическим предварительным просмотром позволяет сразу увидеть текущий цвет, благодаря чему вы можете проверить выбор перед копированием.
- Бесплатно, мгновенно и полностью локально: расчет цветов и считывание изображений происходят прямо в вашем браузере — ничего не загружается, не сохраняется и не регистрируется.
Как использовать
- Выберите цвет с помощью поля цвета или введите/измените значение напрямую.
- Чтобы взять образец цвета с изображения, загрузите картинку и щелкните по той точке, цвет которой вы хотите выбрать.
- Просмотрите значения в форматах HEX, RGB и HSL, отображаемые вместе с образцом в режиме реального времени.
- Нажмите кнопку «Копировать» рядом с нужным форматом — HEX для CSS, RGB или HSL для кода.
Пример
Ввод
Clicking the blue area of an uploaded logoРезультат
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Все три строки описывают один и тот же цвет. Используйте коды HEX в таблицах стилей и инструментах для дизайна, RGB — там, где в коде требуются значения каналов, а HSL — когда вам нужно получить более светлые или более тёмные варианты, изменяя только последнее число.
Какой цветовой формат для какой задачи
Современный CSS поддерживает все три формата везде, где допускается использование цвета, поэтому выбор зависит от рабочего процесса, а не от совместимости. Команды обычно стандартизируют использование HEX в дизайнерских токенах, а затем используют HSL при проработке вариаций — изменяют яркость на 10–15 пунктов, чтобы получить подходящее состояние наведения курсора без изменения оттенка.
| Формат | Пример | Лучше всего подходит для |
|---|---|---|
| Шестнадцатеричный (HEX) | #3b82f6 | CSS, инструменты для дизайна, обмен цветами в чате и технические характеристики |
| Красный, зеленый, синий | Красный, зеленый, синий (59, 130, 246) | Код, обеспечивающий работу с каналами, рисование на холсте, прозрачность с помощью rgba() |
| HSL | hsl(217, 91 %, 60 %) | Создание светлых/темных вариантов и вариантов при наведении курсора, составление палитр |
От выбранного цвета до готового CSS-кода
Выбор цвета обычно является первым шагом при оформлении. Если вам нужен тот же цвет в других системах обозначения — например, в формате CMYK для печати или в виде значения OKLCH для CSS с широкой цветовой гаммой — конвертер цветов продолжит работу там, где заканчивает свой пикер.
Выбранный цвет часто сразу же используется для создания визуального эффекта: генератор box-shadow принимает значение в формате HEX для создания реалистичных теней, а закругленные карточки, созданные с помощью генератора border-radius, завершают общий вид.
→ Конвертер цветов · Генератор box-shadow · Генератор border-radius
Часто задаваемые вопросы
В чём разница между HEX, RGB и HSL?
Это три способа обозначения одной и той же цветовой модели. В формате HEX красный, зеленый и синий каналы объединяются в шесть шестнадцатеричных цифр (#3b82f6); это наиболее распространенный формат в CSS и инструментах для дизайна. RGB представляет те же три канала в виде десятичных чисел от 0 до 255. HSL переформулирует цвет как оттенок (0–360°), насыщенность и яркость — это гораздо интуитивнее, когда нужно «тот же цвет, только светлее». При преобразовании между этими форматами цвет никогда не меняется.
Как происходит выбор цвета из изображения?
Загруженное изображение отображается на невидимом холсте в вашем браузере. При нажатии инструмент считывает значения красного, зелёного и синего цветов пикселя в этой точке и преобразует их в форматы HEX, RGB и HSL. В браузерах, поддерживающих API EyeDropper (Chrome и Edge на настольных компьютерах), вместо этого открывается встроенная лупа, позволяющая выбирать цвета с пиксельной точностью в любой точке экрана.
Мое изображение где-нибудь загружено?
Нет. Изображение открывается непосредственно в вашем браузере и считывается локально из canvas; ни файлы, ни данные о цветах ни при каких обстоятельствах не передаются и не сохраняются. Вы можете загрузить страницу, перейти в автономный режим, и при этом как палитра цветов, так и пипетка для выбора цвета из изображения будут продолжать работать — что делает эту функцию безопасной для еще не выпущенных дизайнов и внутренних скриншотов.
Почему выбранный цвет не совпадает точно с тем, что я вижу на экране?
Две распространенные причины. Сглаживание: пиксели по краям текста и фигур смешиваются с фоном, поэтому при щелчке на пикселе, расположенном на расстоянии одного пикселя от края, получается промежуточный цвет — вместо этого следует взять образец из сплошной центральной части области. Управление цветом: файлы JPG/PNG с необычными цветовыми профилями могут отображаться на разных дисплеях с небольшими различиями; инструмент отображает значение пикселя, записанное в файле, которое и является тем значением, которое вам нужно для работы над дизайном.
Какой формат лучше использовать для копирования CSS?
HEX — это самый надежный вариант по умолчанию: его поддерживают все браузеры и инструменты. Используйте HSL, если планируете создавать варианты для наведения курсора или темного режима, поскольку при изменении только компонента яркости оттенок и насыщенность остаются неизменными. RGB в основном полезен, когда код формирует цвета из числовых каналов или при добавлении прозрачности, где rgba(59, 130, 246, 0.5) читается понятнее, чем восьмизначный HEX-код.