COLOR PICKER
Прозрачность
Оттенок
#
Коротко об инструменте
Инструмент даёт цветовое поле с кистью и четыре связанных поля значений: HEX, RGB, HSV и CMYK. Меняете одно — три остальных пересчитываются мгновенно, отдельный конвертер не нужен. Размер кисти регулируется ползунком от 6 до 72 пикселей. Вся арифметика выполняется в браузере. Типовая ситуация: типография прислала CMYK, а вам нужен веб-эквивалент в HEX. Смотрите также: вытащить палитру из готовой картинки, собрать HEX из трёх значений RGB, проверить контраст текста и фона по WCAG.
Нет, страница работает только внутри собственного холста и не видит пиксели других вкладок или окон — это ограничение безопасности браузера. Чтобы получить цвет из внешнего интерфейса, сделайте скриншот и разберите его анализатором палитры, а точное значение затем доведите здесь в поле HEX.
В HSV первое число — это тон, второе — насыщенность, третье — яркость. Чтобы получить более бледный вариант фирменного цвета, достаточно уменьшить второе число, не трогая тон. В RGB такая же операция требует одновременного изменения трёх каналов и почти всегда уводит оттенок в сторону.
Поле CMYK здесь считается по простой математической формуле без профиля ICC, бумаги и краски. Реальная типография использует профили вроде Coated FOGRA39, а насыщенные экранные цвета вроде чистого зелёного физически недостижимы в четырёх красках. Для тиража всегда сверяйтесь с образцом или веером Pantone.
Отдельного канала альфа в полях нет: инструмент выдаёт непрозрачный цвет в четырёх моделях. Если нужна полупрозрачность, возьмите отсюда значения RGB и допишите четвёртый параметр в CSS вручную — например, rgba(0, 255, 127, 0.4). Оттенок при этом останется тем же.
В поле по умолчанию стоит значение без решётки, вида 00FF7F. Для CSS решётка обязательна, поэтому при копировании добавьте её: #00FF7F. Трёхсимвольная краткая запись вроде #0F7 в этом поле не используется, всегда работает полная шестизначная форма.
Он задаёт диаметр мазка на холсте от 6 до 72 пикселей с шагом 2, по умолчанию 18. Рядом стоят четыре формы кисти: круглая, квадратная, ромбовидная и пиксельная. Маленькая кисть нужна, когда вы подбираете точный оттенок в узкой зоне градиента, крупная — когда закрашиваете область целиком, чтобы оценить цвет на большой площади. Кнопка «Очистить фон» стирает все мазки разом.
Нет, состояние холста и полей живёт только до обновления страницы, а на сервер ничего не отправляется. Переносите нужные значения сразу в CSS-переменные, стили Figma или таблицу токенов — так палитра переживёт закрытие вкладки и останется в проекте.
До: CMYK 100, 0, 50, 0 из макета визитки
После: HEX 00FF7F и RGB 0, 255, 127 для CSS-переменной
До: HSV 150, 100, 100 — предельно насыщенный зелёный
После: HSV 150, 60, 100 — тот же оттенок мягче, HEX пересчитан автоматически
Оценка и фидбек помогают понять, что улучшать дальше.