Для чего это
Достать точный цвет из изображения, исходника которого у вас нет: логотип, присланный в PNG, скриншот чужого интерфейса, фотография, под которую вы подбираете фон.
Изображение вписывается в панель, а клики пересчитываются обратно в его настоящую пиксельную сетку — поэтому вы получаете тот пиксель, в который целились, а не тот, что оказался под курсором на масштабированной копии.
Один пиксель или область
Один пиксель верен для плоской графики и неверен для фотографий, где соседние пиксели могут сильно различаться. Если результат «прыгает», вам нужно среднее по области — его и считает извлечение палитры.
Коротко о цветовых профилях
Изображение может нести профиль, объясняющий, как трактовать его числа. Браузер преобразует их к профилю дисплея, а проба берётся с результата. Для экранной работы это ровно то число, которое нужно. Для печати берите пробу в программе, уважающей исходный профиль, — значения будут отличаться законно.
Стройте варианты в HSL
Получив фирменный цвет, переключите вывод на HSL и меняйте только светлоту, чтобы вывести оттенки для наведения, неактивного состояния и рамок. Если двигать три шестнадцатеричные составляющие по отдельности, оттенок уплывает; при изменении одного числа — нет.
Вопросы
Почему цвет отличается от того, что показывает Photoshop?+
Из-за цветовых профилей. Фотография с профилем Adobe RGB или Display P3 преобразуется для экрана, и здесь вы берёте пробу с того, что декодировал браузер, — то есть с того значения, которое реально покажет веб-страница. Для печати берите пробу в программе, которая владеет профилем.
Это один пиксель или усреднение?+
Ровно один пиксель под курсором. Для выбора фирменного цвета из логотипа это правильное поведение. На фотографии отдельные пиксели сильно скачут — тогда берите [извлечение палитры](/ru/t/palette-extractor), оно даёт цвет области, а не точки.
Зачем показаны сразу HEX, RGB и HSL?+
Потому что в разных местах нужны разные нотации, а переводить вручную — лишний шаг. HSL стоит переключать, когда нужны более светлые и тёмные варианты: меняете L, а оттенок остаётся на месте.
Работает ли со скриншотами?+
Да, и это типичный случай: взять цвет со скриншота сайта или приложения, чей CSS вам недоступен.