Znalezienie "równoważnego" koloru z nieprzezroczystością

Zrobiłem mniej mixin używając odpowiedzi Phrogza. wpisujesz:

1. Jak powinien wyglądać Kolor
2. z pewnym Alfa
3. na podanym tle (domyślnie białe)

Oto kod:

.bg_alpha_calc (@desired_colour, @desired_alpha, @background_colour: white) {
    @r3: red(@desired_colour);
    @g3: green(@desired_colour);
    @b3: blue(@desired_colour);

    @r2: red(@background_colour);
    @g2: green(@background_colour);
    @b2: blue(@background_colour);

    // r1 = (r3 - r2 + r2 * a1) / a1
    @r1: ( @r3 - @r2 + (@r2 * @desired_alpha) ) / @desired_alpha;
    @g1: ( @g3 - @g2 + (@g2 * @desired_alpha) ) / @desired_alpha;
    @b1: ( @b3 - @b2 + (@b2 * @desired_alpha) ) / @desired_alpha;

    background-color: @desired_colour;
    background-color: rgba(@r1, @g1, @b1, @desired_alpha);

}

Użycie w ten sposób:

@mycolour: #abc;
@another_colour: blue;
.box_overlay {
  // example:
  .bg_alpha_calc (@mycolour, 0.97, @another_colour);
  // or (for white bg) just:
  .bg_alpha_calc (@mycolour, 0.97);
}

Oczywiście nie działa w przypadku niemożliwych kombinacji (jak wspomniał Phrogz), co oznacza, że wspierane są tylko łagodne poziomy przezroczystości. Zobaczymy, jak sobie z tym poradzisz.

Dzięki świetnym odpowiedziom Phrogz i ephemerOto funkcja SASS, która automagicznie oblicza najlepszy równoważny kolor RGBA.

Nazywamy go pożądanym kolorem i istniejącym tłem, a obliczy on najlepszy (czyli najbardziej przezroczysty) równoważny kolor RGBA, który daje pożądany wynik w granicach ±1/256 każdego składnika RGB (z powodu błędów zaokrąglania):

@function alphaize($desired-color, $background-color) {

    $r1: red($background-color);
    $g1: green($background-color);
    $b1: blue($background-color);

    $r2: red($desired-color);
    $g2: green($desired-color);
    $b2: blue($desired-color);

    $alpha: 0;
    $r: -1;
    $g: -1;
    $b: -1;

    @while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255) {
        $alpha: $alpha + 1/256;
        $inv: 1 / $alpha;
        $r: $r2 * $inv + $r1 * (1 - $inv);
        $g: $g2 * $inv + $g1 * (1 - $inv);
        $b: $b2 * $inv + $b1 * (1 - $inv);
    }

    @return rgba($r, $g, $b, $alpha);
}

Właśnie Przetestowałem go pod kątem wielu kombinacji (wszystkie Bootswatch themes) i działa smakowicie, zarówno dla efektów dark-on-light, jak i light-on-dark.

PS: jeśli potrzebujesz lepszej precyzji niż ±1/256 w wynikowym kolorze, musisz wiedzieć, jaki algorytm zaokrąglania stosuje się podczas mieszania kolorów rgba (Nie wiem, czy jest to ustandaryzowane, czy nie) i dodać odpowiedni warunek do istniejącego @while, tak aby stale wzrastał $alpha, dopóki nie osiągnie pożądanej precyzji.

From @Phrogz ' odpowiedź:

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

Więc:

r3 - r2 = (r1-r2)*a1
g3 - g2 = (g1-g2)*a1
b3 - b2 = (b1-b2)*a1

Więc:

r1 = (r3 - r2) / a1 + r2
g1 = (g3 - g2) / a1 + g2
b1 = (b3 - b2) / a1 + b2

Uwaga Możesz wybrać dowolną wartość a1, a to znajdzie odpowiednie wartości r1, g1, i b1 wymagane. Na przykład, wybranie Alfy 1 mówi ci, że potrzebujesz RGB1 = rgb3, ale wybranie Alfy 0 nie daje żadnego rozwiązania (oczywiście).