Как узнать истинный цвет фона элемента? С учётом всех родителей, у которых могут быть полу прозрачные цвета фона?

Question

[Артём Силантьев]

Собственно вот, нужно вычислить уровень контрастности цвета шрифта и цвета фона.

Цвет фона может быть полу прозрачным, и состоять из множества наложений полу прозрачных слоёв за ним.

Нужно как то вычислить реальный, настоящий цвет фона с учётом всех родителей от нужного элемента.

Например такая структура (scss):

body {
  background-color: lightgreen;
  
  div.cont1 {
    background-color: rgba(192, 0, 0, 0.5);

    div.cont2 {
      background-color: rgba(0, 128, 128, 0.333);

      span.text {
        color: red;
      }
    }
  }
}

Как вычислить, какой настоящий цвет фона у элемента span.text? Понимаю, что нужно как то скомпилировать цвета, начиная от самого верхнего непрозрачного цвета, но как это сделать? Есть ли какое то готовое решение для такого вычисления ?

Ах да, забыл указать, это нужно сделать в окружении Node.js, мы загружаем страницу через puppeter и проверяем её на всякие штуки.

Answer 1

[Артём Силантьев]

Нашёл решение: https://jsfiddle.net/5ptdk7sv/

Всем спасибо, ответы помогли мне направить поиски в правильном направлении :)

Answer 2

[Stimulate]

Используйте расширения браузера, например ColorZilla для хрома

Comments

[Ильдар Гизетдинов]

Судя по всему, речь о программном расчете