Utilore

Пипетка цвета

Ведите по квадрату, чтобы подобрать цвет, или возьмите готовый: пипеткой с картинки, а где браузер позволяет — прямо с экрана. Код появляется сразу во всех трёх записях.

Выберите цвет

Недавние

Брать цвет из любой точки экрана умеют только Chrome и Edge. В Safari и Firefox кнопки просто нет: пообещать и отказать хуже, чем не предлагать. Там пользуйтесь картинкой — снимок экрана работает ничуть не хуже.

Картинка остаётся в этой вкладке: цвет читается с холста здесь же, ничего не загружается. Недавние цвета запоминаются только на этом устройстве.

Рядом: Конвертер цветов · Генератор палитры цветов · Генератор градиента CSS · HEX в RGB

Как пользоваться

  1. Ведите по квадрату, чтобы выбрать оттенок, а ползунком под ним меняйте семейство цвета.
  2. Поставьте непрозрачность, если нужен полупрозрачный цвет — она появится в коде как rgba или двумя лишними знаками в HEX.
  3. Чтобы взять готовый цвет, нажмите «Взять с картинки» и щёлкните по изображению. В Chrome и Edge можно снять цвет и прямо с экрана.
  4. Нажмите «Копировать» рядом с нужной записью. Цвет попадёт в полоску недавних, к нему можно вернуться.

Полезно знать

Почему квадрат построен на HSV

В HSV квадрат «насыщенность против яркости» заполнен целиком: каждая точка означает свой цвет. Постройте тот же квадрат на HSL — и он вырождается: верхний ряд весь белый, нижний весь чёрный, и половина площади ничего не выбирает. Ради этого выбор и сделан, и ровно это стережёт проверка.

Три входа, потому что приходят за разным

Подобрать цвет и найти цвет — разные задачи. Квадрат для подбора. Пипетка по картинке — для цвета, который уже где-то есть: в скриншоте, в логотипе, в фотографии. Снять с экрана — то же самое, но не выходя из окна, и это умеют только Chrome и Edge.

Где появляется прозрачность

Непрозрачность пишется, только когда она неполная: «rgb(31, 95, 214)», а не «rgba(31, 95, 214, 1)» — второе всё равно правят руками. В HEX прозрачность становится двумя лишними знаками в конце: нынешние браузеры это понимают, старые инструменты нет, поэтому при полной непрозрачности хвост не пишется.

Частые вопросы

Почему в моём браузере нет кнопки «взять с экрана»?

Потому что Safari и Firefox этого не умеют. Возможность браузерная, а не наша, и есть она только у Chrome и Edge. Показать кнопку и отказать хуже, чем не предлагать, — поэтому её просто нет. Сделайте снимок экрана и работайте с картинкой: результат тот же самый.

Как узнать цвет пикселя на фотографии?

Нажмите «Взять с картинки», выберите файл и ведите указателем по изображению — цвет идёт за указателем. Щёлкните, чтобы оставить. Картинка никуда не загружается: она рисуется на холсте в этой вкладке и читается оттуда.

Можно ли вписать цвет вместо того, чтобы выбирать?

Да. Впишите его в любое из трёх полей в любой привычной форме — #1f5fd6, 1f5fd6, rgb(31, 95, 214) — и остальные два заполнятся сами вместе с квадратом. Если нужен только перевод из записи в запись, соседний конвертер цвета — дорога короче.

Ползунок тона прыгает, когда я увожу яркость в ноль.

Не должен — и не прыгает: у чёрного и белого тона нет вовсе, поэтому ползунок сохраняет прежний, а не срывается в красное. Это сделано нарочно: иначе каждый заход в низ квадрата терял бы семейство цвета, в котором вы работали.

Где хранятся недавние цвета?

На этом устройстве, в браузере. Они никуда не отправляются и ни с кем вас не связывают: очистите данные сайта — и полоска снова пуста.

Похожие инструменты