Пипетка онлайн: узнать цвет с экрана или картинки — HEX, RGB, HSL

Коротко. Нажмите «Пипетка с экрана» и щёлкните по любому месту экрана — появятся коды цвета в HEX, RGB и HSL, их можно скопировать. Пипетка с экрана работает в Яндекс Браузере, Chrome, Edge и Opera на компьютере. В других браузерах загрузите картинку и нажмите на неё в нужном месте. Можно и наоборот: впишите код — увидите цвет и переведёте его в другой формат.

Выбрать цветПипетка с экранаЦвет с картинки

HEXСкопировать RGBСкопировать HSLСкопировать

Контраст текста

Цвета и картинки обрабатываются на вашем устройстве и никуда не загружаются. Если вы согласились на cookie, в Яндекс Метрику уходит только факт использования сервиса — без результатов и введённых данных.

Какой формат кода выбрать

• HEX (#2563EB) — самый распространённый. Его понимают графические редакторы, конструкторы сайтов и CSS.
• RGB (rgb(37, 99, 235)) — количество красного, зелёного и синего от 0 до 255. Удобно, если программа просит три числа.
• HSL (hsl(221, 83%, 53%)) — оттенок, насыщенность и яркость. Удобно, чтобы получить тот же цвет светлее или темнее: меняйте только последнее число.

Хорошо ли читается текст

Под кодами видно, как на выбранном цвете смотрится белый и чёрный текст, и коэффициент контраста. Ориентир из рекомендаций по доступности WCAG: для обычного текста контраст должен быть не меньше 4,5:1, для крупного — не меньше 3:1. Если контраст ниже, текст будет трудно читать, особенно на солнце и людям со слабым зрением.

Почему цвет с экрана может отличаться

Пипетка берёт цвет так, как его показывает экран. Если на картинке тень, блик или сжатие JPG, соседние точки могут заметно отличаться — попробуйте нажать в нескольких местах. А на разных мониторах один и тот же код выглядит по-разному из-за настроек экрана — проверить их можно в калибровке монитора.

Пипетка в инструментах разработчика

Если нужно узнать цвет элемента на сайте, в браузерах на основе Chromium есть ещё один способ: нажмите на элемент правой кнопкой мыши → «Просмотреть код» (название пункта может отличаться), найдите в стилях цвет и нажмите на цветной квадратик рядом с ним — откроется выбор цвета со своей пипеткой.

Чтобы сохранить картинку в нужном формате, пригодится конвертер WebP в JPG.