Как проверить совпадение цвета по HEX

Что проверяют

Знаете ли вы, что браузер почти никогда не отдаёт цвет в том виде, в каком он записан в макете. Интервьюер хочет услышать, как вы сравниваете цвет в автотесте и вручную и какие форматы учитываете. Следом спрашивают про прозрачность и про то, почему пипетка на скриншоте может обмануть.

Как отвечать

Начните с формата. HEX бывает четырёх видов: #RRGGBB, короткий #RGB, а также #RRGGBBAA и #RGBA с альфа-каналом. Регистр не важен: #FF5733 и #ff5733 это один цвет, а #F53 равен #FF5533.

Главное дальше: вычисленный стиль браузер возвращает не в HEX, а в rgb() или rgba(). Сравнивать строку из макета со строкой из DOM напрямую нельзя, сначала обе приводят к одному виду:

• Selenium: value_of_css_property("background-color") вернёт что-то вроде rgba(255, 87, 51, 1), а класс Color из selenium.webdriver.support.color переведёт это в HEX через Color.from_string(value).hex. В Java аналог Color.fromString(value).asHex();
• Playwright: expect(locator).toHaveCSS("background-color", "rgb(255, 87, 51)"), ожидаемое значение заранее переводите из HEX в rgb;
• вручную: пипетка в DevTools на вкладке Styles или Computed, в Figma значение из режима инспекции.

Проверяйте тот элемент, который реально красит: цвет может задаваться у родителя, градиентом в background-image или CSS-переменной темы. Отдельно проходите состояния :hover, :focus, disabled и тёмную тему.

Где спотыкаются

Сравнивают строки как есть: #FF5733 из макета против rgb(255, 87, 51) из браузера, и тест падает на правильном цвете.

Берут цвет пипеткой со скриншота. Сглаживание, цветовой профиль монитора и сжатие картинки дают отклонение на несколько единиц, поэтому сравнение по пикселям требует допуска, а надёжнее читать стиль из DOM.

Забывают про альфа-канал. Полупрозрачный цвет поверх фона визуально совпадает с макетом, а вычисленное значение у него другое, и наоборот.