Зачем понадобилась эта пипетка цвета

Две вещи, ради которых это стоило сделать

В пипетках цвета по фото нет недостатка. Большинство из них делает одну из двух раздражающих вещей.

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

Вторая — заканчивается на HEX-коде. Цвет был нужен вам, потому что вы собирались им пользоваться: положить в таблицу стилей, построить вокруг него шкалу, проверить, ляжет ли на него белый текст. Инструмент, который выдаёт #3F51B5 и кнопку «Копировать», сделал самую лёгкую часть и оставил вам всю остальную.

Этот инструмент избегает и того, и другого. Сайт — это статические страницы и небольшой скрипт, который читает пиксели с холста в вашей же вкладке, так что сервера для загрузки просто нет. Один щелчок даёт девять кодов цвета, палитру из восьми цветов с долей каждого, шесть гармоний, шкалу от 50 до 950, результаты проверки контраста по WCAG и просмотр при нарушениях цветового зрения.

Кто это делает

Меня зовут Md. Delwar Hossen. Я больше восьми лет делаю веб-приложения, значительную часть этого времени — инструменты для продуктивности в софтверной консалтинговой компании. Сейчас я директор по веб- и цифровым системам в американской компании и работаю удалённо. Профиль — в LinkedIn.

Я сделал этот инструмент, потому что он постоянно был мне нужен. Чаще всего мне приходилось восстанавливать интерфейс по скриншоту без исходного макета, и каждая пипетка, которую я пробовал, либо отправляла скриншот на сервер, либо останавливалась на HEX-коде. На руководстве стоит моё имя по той же причине, что и на этой странице: если какое-то число здесь неверно, вы знаете, кому об этом сказать.

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

Astro и Tailwind CSS, без интерфейсных фреймворков. Пипетка — это обычный TypeScript, управляющий двумя холстами.

Два холста вместо одного — то самое решение, на котором держится точность. Первый — тот, что вы видите: масштабируется, двигается, приближается и перерисовывается вслед за вами. Второй держит изображение в исходном размере, не масштабируется никогда и является единственным, что вообще измеряется. Именно это разделение делает цвет, снятый при 12×, тождественным цвету, снятому во вписанном масштабе, и оно закрыто сквозным тестом ровно потому, что ломается такое тихо.

Все расчёты цвета лежат в одной папке и не имеют ни одной внешней зависимости. Преобразования проверяются на возврат к исходному значению для каждой 8-битной тройки sRGB — это пространство достаточно мало, чтобы обойти его целиком, а не выборочно. Поворот тона и шкалы светлоты считаются в OKLCH, а не в HSL, потому что HSL не перцептивно равномерно: построенная в нём шкала ровна в числах и неровна на глаз — жёлтые выцветают, а синие остаются тяжёлыми.

Как проверяются утверждения на этом сайте

Числа о точности на этом сайте вычисляют скрипты. Вот как проверяется каждый вид утверждений.

• Расчёты цвета покрыты юнит-тестами. Преобразования проверяются на возврат к исходному значению, реализация CIEDE2000 сверена с известными парами, а утверждения о цветовом зрении проверены по всему кубу RGB, а не заявлены.
• Обещание о приватности проверено тестом. Сквозной скрипт загружает настоящий инструмент в headless-Chromium, снимает цвета и падает, если со страницы уходит хоть один запрос.
• Цифры точности выдаёт скрипт. Каждое число об искажении цвета в руководстве получено скриптом, который работает в настоящем браузере, поэтому кодирование и декодирование JPEG — браузерные. Каждое расхождение он считает тем же кодом дельта-E, что и инструмент. Палитра на главной странице получена так же: скрипт прогоняет код палитры инструмента по приложенной фотографии-примеру.
• Устаревший совет будет пойман. Если новое измерение противоречит совету рядом с ним, проверка падает, пока совет не перепишут.

У каждого измеренного числа в руководстве указаны дата и браузер, в котором его измерили.

Чего пипетка намеренно не делает

Вот известные ограничения инструмента.

• Экранная пипетка использует браузерный API, который есть только в Chromium. Firefox и Safari его пока не поддерживают, поэтому там кнопка скрыта.
• Экспорта в PNG, JPEG или палитры Adobe нет. Лист образцов SVG — самое близкое к картинке палитры, которой можно поделиться.
• Управление цветом не применяется. Вы получаете байты sRGB, которые нарисовал бы браузер: правильный ответ для веба и неправильный, если вы делаете экранную цветопробу на откалиброванном мониторе.
• Это не устанавливаемое офлайн-приложение. Загруженной странице сеть больше не нужна, но сервис-воркера нет, поэтому холодный старт без связи не сработает.

Исправления

Если здесь что-то неверно, я предпочту это исправить, а не защищать. Напишите на info@exacthex.com или загляните на страницу контактов, где объяснено, что приложить, чтобы проблему с цветом можно было воспроизвести. Особенно приветствуются поправки к измеренным величинам: ошибиться в них было бы обиднее всего.