Подбор цвета
Один цвет, все коды и то, с чем он сочетается.
Пишите hex, rgb(), hsl() или название цвета CSS — принимается всё.
- hex
- rgb
- hsl
- hsv
- cmyk
- lab
- lch
- oklch
Читается ли текст на нём
Светлее и темнее
С чем сочетается
Комплементарные — противоположный
Аналогичные — соседние
Триада — по трети круга
Раздельно-комплементарные — по обе стороны от противоположного
Выберите цвет, впишите его или снимите пипеткой с экрана — и все коды появятся сразу: hex, RGB, HSL, HSV, CMYK, LAB, LCH и OKLCH. Ниже: читается ли текст на этом цвете, ряд светлых и тёмных оттенков и цвета, которые с ним сочетаются. Нажмите на что угодно, чтобы скопировать.
Как пользоваться
- Выберите цвет или вставьте hex, rgb(), hsl() либо название цвета CSS.
- Нажмите на тот код, который просит ваш инструмент, — он скопируется.
- Ниже посмотрите оттенки, сочетания и читаемость текста.
Почему этот инструмент
Полная конфиденциальность
Всё работает внутри браузера. Ваши файлы и текст никогда не отправляются на сервер.
Бесплатно и без ограничений
Без регистрации, без водяных знаков и без лимита на количество использований.
Мгновенный результат
Не нужно ничего загружать и ждать очереди — результат появляется так быстро, как позволяет ваше устройство.
Работает на любом устройстве
Любой современный браузер на телефоне, планшете или компьютере. Ничего устанавливать не нужно.
Частые вопросы
- Какой формат выбрать?
- Hex для CSS и графических редакторов — он короче всех и понятен везде. RGB там, где просят три числа. HSL, когда цвет нужно подкрутить руками: изменение одного числа делает ровно одну предсказуемую вещь. CMYK только для печати и только как отправная точка. OKLCH — если пишете современный CSS: это тот формат, где «сделать светлее» не означает заодно «сделать другим».
- Что такое OKLCH и зачем он здесь?
- Более новый способ описывать цвет, где числа соответствуют тому, что видит глаз. В HSL два цвета с одинаковой светлотой могут выглядеть совершенно по-разному: жёлтый на 50% кажется куда светлее синего на 50%. OKLCH это исправляет — поэтому его приняли в CSS и поэтому палитры, собранные в нём, выглядят ровными. Браузеры поддерживают его с 2023 года.
- Точен ли перевод в CMYK?
- Это стандартная формула, и её же дают большинство онлайн-инструментов, — но абсолютно точной формулы не существует. Настоящий CMYK зависит от машины, краски и бумаги; именно это описывает ICC-профиль. Пользуйтесь этими числами, чтобы заполнить форму или начать разговор с типографией, но просите пробу, прежде чем печатать что-то важное.
- Можно ли взять цвет с другого места на экране?
- В Chrome и Edge — да: кнопка «Взять с экрана» снимает любой пиксель, в том числе за пределами браузера. В Firefox и Safari это не реализовано, поэтому кнопки там просто нет. Страница не может видеть ваш экран без помощи браузера, и никакой хитрый код этого не меняет.
- Что означают числа контраста?
- Отношение между вашим цветом и белым или чёрным, от 1:1 до 21:1. Основному тексту нужно 4,5:1 для соответствия WCAG AA, крупному тексту и значкам — 3:1. Проверять стоит, даже если формальные требования вас не касаются: при отношении ниже примерно 3:1 многим людям действительно тяжело читать при обычном дневном свете.
- Отправляется ли что-нибудь куда-нибудь?
- Нет. Все преобразования здесь — это арифметика, выполняемая в вашем браузере. Ни загрузки, ни запросов, ни аккаунта: страница работает и с выключенной сетью.