Установка цвета, который зависит от фона

Question

Я новичок в SCSS. У меня есть следующий код:

.answers-post {
  float: left;

  .btn {
    background: white;

    &:hover {
      background: dark-light-diff($primary, $secondary, 65%, -75%);
      color: $secondary;
    }
  }
}

Устанавливает фон кнопки белым. Некоторые из пользователей, которые используют наши скрипты, имеют белый фон. Поэтому мне в голову пришла небольшая идея - можно ли как-то проверить цвет фона и если он типа белый, то он не установит его белым (не установит никакого цвета). Я имею в виду, что шестнадцатеричное значение находится между двумя точками белого (не знаю, какие именно).

Заранее извиняюсь, если этот вопрос звучит странно, я не совсем уверен, что это разумноИдея в scss, но, читая документы, scss - это мощный инструмент, который содержит много интересных идей.

Answer 1

Используйте JavaScript, чтобы проверить яркость значений RGB:

var c = '#F48024'.substring(1);      // strip #
var rgb = parseInt(c, 16);   // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff;  // extract red
var g = (rgb >>  8) & 0xff;  // extract green
var b = (rgb >>  0) & 0xff;  // extract blue

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

if (luma > 90) {
    // pick not white
}