Об этом инструменте
Палитра цветов сопоставляет цвет между форматами, которые понимает CSS. Эта построена на модели HSV: квадрат насыщенности/яркости задаёт, насколько цвет насыщен и ярок, ползунок оттенка вращается по цветовому кругу, а ползунок альфа задаёт непрозрачность. Каждое изменение преобразуется с помощью culori в четыре канонические строки — HEX (#rrggbb или #rrggbbaa, когда альфа меньше 1), rgb()/rgba(), hsl()/hsla() и перцептивно-равномерный oklch() — так что один и тот же цвет готов к вставке в любую таблицу стилей или design token.
Используйте его, чтобы взять точное значение из макета, перевести hex-код, присланный дизайнером, в rgb() или hsl(), который ожидает ваш код, настроить полупрозрачное наложение и считать rgba() или преобразовать устаревший цвет в современный oklch() для широкогаммного CSS. Вставьте любую строку CSS-цвета — hex-код, именованный цвет вроде rebeccapurple или полное выражение rgb()/hsl() — и вся палитра синхронизируется с ним; недавно выбранные цвета остаются в кликабельном ряду до конца вашей сессии.
Всё выполняется в вашем браузере — цвета никогда не загружаются на сервер, а ряд недавних цветов хранится только в памяти, поэтому он очищается при закрытии вкладки.
Часто задаваемые вопросы
В чём разница между HSL и OKLCH?
HSL описывает цвет через оттенок, насыщенность и светлоту в пространстве sRGB, но одинаковые значения светлоты могут выглядеть очень по-разному по яркости. OKLCH использует перцептивно-равномерную модель, поэтому его значения светлоты и хромы соответствуют тому, как глаз действительно воспринимает цвет, и остаются согласованными между оттенками.
Как представить прозрачность в hex-цвете?
Добавьте двузначное значение альфа к шестизначному hex, получив #rrggbbaa — например, #ff000080 — это красный с непрозрачностью около 50 %. Эта 8-значная форма поддерживается во всех современных браузерах; когда альфа полностью непрозрачна, палитра выдаёт более короткий #rrggbb.
Могу ли я вставить именованный CSS-цвет вроде rebeccapurple?
Да. Поле hex принимает любую допустимую строку CSS-цвета — именованные цвета, hex-коды и выражения rgb()/hsl()/oklch() — и корректный ввод мгновенно синхронизирует квадрат, ползунки и каждый формат вывода.