Пипетка и конвертер цвета
Выбирайте цвет и конвертируйте между HEX, RGB, HSL и OKLCH.
⚠ This OKLCH value falls outside the sRGB gamut and was clamped.
Pick a color from an image
WCAG contrast
Color schemes & harmonies
Tints & shades
Color blindness simulation
Runs entirely in your browser. Nothing is uploaded.
Бесплатный конвертер и выбор цветов, полностью работающий в вашем браузере
Этот бесплатный конвертер цветов мгновенно преобразует любой цвет во все нужные форматы. Вставьте hex-код, введите значение RGB, перетащите цветовое колесо или возьмите пробу пикселя с помощью пипетки — и увидьте результат в HEX, RGB, HSL, HSV, CMYK и OKLCH одновременно. Каждое поле редактируемо и двунаправленно: измените один формат — все остальные обновятся в реальном времени без перезагрузки страницы, без запросов к серверу, без задержек.
Такие сайты, как ColorHexa.com, RapidTables, convertingcolors.com и cssgradient.io, охватывают отдельные части этой функциональности: ColorHexa показывает детальные описания для каждого URL, RapidTables предлагает конвертеры одного формата на отдельных страницах, convertingcolors поддерживает нишевые цветовые пространства, такие как CIELab и XYZ, а cssgradient создан специально для генерации CSS-градиентов. Этот инструмент объединяет повседневные задачи — конвертацию форматов, визуальный выбор, проверку доступности и генерацию палитр — в один живой интерфейс, где вы вводите цвет один раз и видите всё сразу. Ничего не загружается — вся обработка происходит локально.
Конвертируйте HEX, RGB, HSL, HSV, CMYK и OKLCH — двунаправленно и мгновенно
Каждое поле редактируемо и остаётся синхронизированным. Вставьте hex-код — значения RGB, HSL, HSV, CMYK и OKLCH обновятся на месте. Измените любое из них — остальные немедленно следуют. Это делает инструмент одновременно быстрым конвертером hex в RGB, инструментом RGB в hex, конвертером RGB в CMYK и конвертером HSL/HSV/OKLCH в одном представлении — идеально, когда дизайн-файл даёт один формат, а таблица стилей, задание на печать или дизайн-система требуют другого.
Все выходные данные — допустимые значения HTML и CSS: #hex, rgb(…), hsl(…), hsv(…), cmyk(…) и oklch(…) — каждое с кнопкой копирования в один клик. Инструмент также определяет ближайший именованный цвет CSS, чтобы вы могли мгновенно описать оттенок или проверить, совпадает ли пользовательский hex со стандартным ключевым словом.
Выберите цвет из изображения — или прямо с экрана
Нужен точный цвет из фотографии, логотипа, скриншота или макета? Используйте пикер цвета из изображения: загрузите файл, перетащите или вставьте из буфера обмена (Ctrl+V / Cmd+V), затем наведите на изображение и нажмите, чтобы захватить любой пиксель. Встроенная лупа-увеличитель зумирует для точного выбора пикселя, а каждый выбранный цвет сохраняется в полоске «выбрано из изображения», чтобы вы могли создать палитру из одного изображения, не теряя предыдущих выборов. Изображение обрабатывается локально с помощью HTML-канваса и никогда не покидает ваше устройство — работает во всех браузерах, включая Firefox и Safari.
Предпочитаете захватить цвет из другого места на экране? Пипетка берёт пробу любого пикселя вашего дисплея в Chrome 95+ и Edge 95+ через нативный EyeDropper API — нажмите на неё, наведите на любой пиксель на экране, и этот цвет мгновенно загрузится во все поля. Полоска недавних цветов и интерактивное цветовое колесо дополняют варианты выбора, и всё без необходимости что-либо устанавливать.
Цветовые схемы, гармонии, тона и тени
Превратите один цвет в целую палитру. Инструмент генерирует шесть подходящих цветовых схем на основе гармоний цветового колеса: дополнительные, аналогичные, триадные, тетрадные, разделённые дополнительные и монохромные. Нажмите на любой образец, чтобы сделать его новым базовым цветом, и продолжайте исследование — инструмент работает как быстрый генератор цветовых палитр для создания связных, брендовых комбинаций.
Шкала тонов и теней производит диапазон более светлых и более тёмных шагов от вашего базового цвета — полезно для состояний при наведении, активных состояний, отключённых состояний, рамок и фоновых заливок. Нажатие на любой шаг делает его активным цветом и показывает полную разбивку форматов. Как генерация палитры, так и шкала тонов/теней обновляются мгновенно при каждом изменении цвета без запросов к серверу.
Проверка контраста WCAG и симуляция цветовой слепоты
Доступность встроена в каждый выбор цвета. Проверщик контраста WCAG вычисляет основанное на яркости соотношение контраста вашего цвета с белым и чёрным, затем показывает значки AA и AAA «пройдено/не пройдено» для обычного текста, крупного текста и компонентов UI — три уровня WCAG 2.1, определяющих, соответствует ли пара цветов переднего/заднего плана стандартам доступности. Обновляется в реальном времени при настройке цвета, так что вы можете итерироваться к соответствию без переключения на отдельный инструмент.
Симулятор цветовой слепоты показывает предпросмотр вашего цвета таким, каким его видят люди с протанопией, дейтеранопией, тританопией и ахроматопсией — вычислено с помощью стандартного алгоритма симуляции Brettel/Viénot и обновляется в реальном времени. Совместно проверка контраста и симуляция цветовой слепоты помогают убедиться, что ваши дизайнерские решения остаются значимыми и различимыми для каждого зрителя.
Понимание OKLCH — будущее CSS-цвета
OKLCH — это перцептивно равномерное цветовое пространство, появившееся в основном CSS через спецификацию CSS Color Level 4. Оно представляет цвета как Яркость (L), Насыщенность (C) и Оттенок (H), где Яркость откалибрована по человеческому восприятию, а не по линейной световой энергии. Это означает, что два цвета с одинаковым значением L будут выглядеть одинаково светлыми для человеческого глаза вне зависимости от их оттенка — чего не происходит в HSL или RGB. Для дизайнеров, создающих систематические палитры, это означает возможность определить единственное значение L для «основного фона», применить его к каждому оттенку в палитре и получить визуально сбалансированные результаты без ручной корректировки.
OKLCH также описывает более широкий цветовой охват, чем sRGB — он может представлять цвета Display P3 и Rec.2020, выходящие за пределы треугольника sRGB, используемого большинством hex-, RGB- и HSL-значений. Современные браузеры (Chrome, Safari, Firefox) теперь нативно поддерживают функцию CSS oklch(), делая OKLCH перспективным форматом для работы с цветом в CSS. Этот инструмент показывает предупреждение о цветовом охвате, когда введённое значение OKLCH выходит за пределы диапазона sRGB и будет усечено старыми браузерами, давая вам раннее предупреждение перед развёртыванием в продакшн.
Бесплатная альтернатива Google Color Picker, Adobe Color и онлайн-инструментам
Большинство пикеров цветов скрыты внутри чего-то большего. Google Color Picker появляется только в результатах поиска для конкретных запросов и не может быть добавлен в закладки или использоваться самостоятельно. Adobe Color Picker живёт внутри Photoshop, Illustrator или Adobe Color (color.adobe.com), что требует учётной записи Adobe и синхронизирует данные с серверами Adobe. ColorHexa и RapidTables — это справочные сайты, а не интерактивные инструменты. convertingcolors.com охватывает нишевые цветовые пространства, но лишён функций выбора и создания палитр. cssgradient.io отлично подходит для генерации градиентов, но не для управления отдельными цветами.
Это самостоятельный, бесплатный пикер и конвертер цветов, который открывается одним кликом, работает на любом устройстве, никогда не просит вас войти в систему и полностью работает в вашем браузере. Будь вы разработчиком, подбирающим hex бренда, дизайнером, настраивающим HSL-палитру, специалистом по печати, проверяющим приближения CMYK, или инженером по доступности, проверяющим соотношения контраста WCAG — этот инструмент выполняет всю работу на одной быстрой, приватной странице. Поддержка OKLCH, проверка доступности и генерация палитр включены по умолчанию — функции, за которые большинство альтернатив берут плату или попросту не предлагают.
Frequently asked questions
Этот конвертер цветов бесплатный?
Да — полностью бесплатный, без регистрации, без учётной записи и без ограничений использования. Он полностью работает в вашем браузере, поэтому цвета, которые вы выбираете, вставляете или отбираете, никогда не покидают ваше устройство. Ничего не нужно устанавливать, подписка не требуется. Каждая функция — конвертация, пипетка, пикер изображения, проверка контраста WCAG, тона и тени, симуляция цветовой слепоты и генерация цветовых схем — доступна бесплатно с первого посещения, без учётной записи.
Как конвертировать HEX-код в RGB?
Вставьте ваш hex-код (с ведущим # или без) в поле HEX, и значения RGB, HSL, HSV, CMYK и OKLCH обновятся мгновенно. Например, вставьте #3b82f6, и вы немедленно увидите rgb(59, 130, 246) в поле RGB и hsl(217, 91%, 60%) в поле HSL. Конвертация двунаправленная: введите значение RGB — HEX и все остальные поля обновятся таким же образом.
Между какими форматами цвета может конвертировать этот инструмент?
Инструмент конвертирует двунаправленно между шестью форматами: HEX (код #rrggbb, используемый в HTML и CSS), RGB (значения красного-зелёного-синего от 0 до 255), HSL (оттенок 0–360°, насыщенность и светлота в процентах), HSV/HSB (оттенок-насыщенность-значение, модель, используемая в большинстве пикеров цвета дизайн-приложений), CMYK (проценты голубого-пурпурного-жёлтого-чёрного для предварительного просмотра печати) и OKLCH (современное перцептивно равномерное цветовое пространство). Измените любое поле — остальные пять обновятся мгновенно.
Можно ли выбрать цвет из изображения или фото?
Да — это полноценный пикер цвета из изображения. Загрузите фото, перетащите его или вставьте из буфера обмена (Ctrl+V / Cmd+V), затем наведите курсор на изображение и нажмите, чтобы захватить точный цвет любого пикселя. Встроенная лупа-увеличитель зумирует для точного выбора пикселя. Изображение обрабатывается локально в вашем браузере с помощью HTML-канваса и никогда не загружается ни на какой сервер.
Проверяет ли он контраст для доступности (WCAG)?
Да. Проверщик контраста WCAG вычисляет основанное на яркости соотношение контраста между выбранным цветом и белым и чёрным фонами, и показывает значки «пройдено/не пройдено» AA и AAA для обычного текста, крупного текста и компонентов UI. WCAG AA требует соотношения 4,5:1 для обычного текста (3:1 для крупного); WCAG AAA требует 7:1 (4,5:1 для крупного). Проверщик обновляется в реальном времени при настройке любого поля цвета.
Что такое OKLCH и зачем его использовать?
OKLCH — это современное перцептивно равномерное цветовое пространство, введённое в CSS Color Level 4. В отличие от RGB или HSL, где одинаковые числовые изменения не производят одинаково воспринимаемых различий для человеческого глаза, OKLCH откалиброван так, что увеличение или уменьшение значения яркости (L) на фиксированную величину производит визуально согласованный результат вне зависимости от оттенка. Это делает его идеальным для создания доступных, сбалансированных цветовых палитр. OKLCH также представляет цвета широкого охвата (Display P3) и нативно поддерживается в современных браузерах.
Работает ли пикер цветов на iPhone и Android?
Да. Весь инструмент работает в любом современном мобильном браузере — Safari на iPhone/iPad и Chrome на Android. Цветовое колесо, поля ввода форматов, пикер цвета из изображения, проверщик контраста WCAG, шкала тонов/теней и генератор цветовых схем работают нормально на мобильных устройствах. Экранная пипетка недоступна в мобильных браузерах (это API только для Chrome/Edge на рабочем столе), но пикер изображения и вставка из буфера обмена отлично работают на мобильных устройствах.
Related tools
Все инструменты
Новое Генератор glassmorphism
Создайте карточку из матового стекла и скопируйте CSS с живым предпросмотром.
Новое Генератор CSS text-shadow
Настройте тень текста CSS с живым предпросмотром и скопируйте код.
Новое Смешивание цветов
Смешивайте два цвета в любой пропорции и копируйте результат или любой шаг.
Новое Пипетка цвета с изображения
Выберите любой цвет с изображения и получите его доминирующую палитру в HEX, RGB и HSL.
Новое Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Новое Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.