CSS lub PHP? kolor, który jest w 80% oryginalny, ale bez "przezroczystości"?

Question

To może być trudne pytanie.

Mam funkcję php, która zwraca wartość koloru w rgba() z argumentem $alpha.

function colorWheel($alpha) { 

    "rgba(170, 135, 178, ".$alpha.")" 
    … 
} 

Więc kiedy dzwoni ...

.title { color: <?php echo colorWheel(.8); ?>; } 

... Mam rgba(170, 135, 178, .8);

---

Mam problem z tym jest to, że kolor jest "przezroczysty" i pokazuje "nakładki".

Jednak to, co naprawdę lubią mieć tylko 80% wartości kolorów! Bez przezroczystych nakładek.

Pytanie brzmi teraz, jak rozwiązać ten problem?

Wszelkie kreatywne pomysły, jak to zrobić? Nie muszę używać rgba(), to jest po prostu najłatwiejsza rzecz, jaka przyszła mi do głowy. Czy istnieje sposób, aby nie mieszać nakładających się kształtów, które mają wartość alfa?

Czy istnieje rozwiązanie php do obliczenia 80% wersji rgb(170, 135, 178)? Ważne jest, aby to obliczenie działało dynamicznie z funkcją, ponieważ w funkcji jest więcej kolorów - to kolejne pytanie do "How to return a color-value based a date and random?"!

Z góry dziękuję.

Answer 1

że powinien to zrobić:

function colorWheel($alpha) { 
    $r = round(170 * $alpha); 
    $g = round(135 * $alpha); 
    $b = round(178 * $alpha); 
    "rgba($r, $g, $b, 1)"; 
    … 
} 

dobrze, sprawia, że ​​ciemniejszy kolor, jeśli chcemy, aby było lżejsze trzeba umieścić alfa do wartości> 1, a także sprawdzić, czy R, G lub b przechodzi na 255 i ustawia na 255, jeśli ma wartość

Answer 2

Aby symulować kolor z kryciem, potrzebny jest również kolor tła. Powiedzmy, że R,G,B są komponentami koloru tła, a r,g,b są komponentami kolorystycznymi. Jeśli chcesz symulować kolor krycia na określonym tle, należy podjąć odpowiednie wartości samego kanału i dodać je do konkretnych ciężarów:

r = r*alpha + R*(1-alpha) 
g = g*alpha + G*(1-alpha) 
b = b*alpha + B*(1-alpha) 

Weźmy prosty przykład. Chcesz uzyskać alpha = 0.8 w kolorze rgb(r,g,b) = rgb(255,0,0) (czerwony) na tle rgb(R,G,B) = rgb(255,255,255) (biały). Oznacza to, że trzeba podsumować 80% kolor + 20% BG:

r = 255*0.8 + 255*0.2 = 255 
g = 0*0.8 + 255*0.2 = 51 
b = 0*0.8 + 255*0.2 = 51 

Answer 3

Pytanie jest, co twoja definicja „80% koloru” w rzeczywistości.

W CSS dostępne są obecnie 2 przestrzenie kolorów: RGB i HSL (który jest faktycznie obsługiwany jako ładny well).

Można wykonać następujące obliczenia RGB:

function colorWheel($alpha) { 

    'rgba('.$r*$alpha.','.$g*$alpha.','.$b*$alpha.', 1)'; 
    … 
} 

Albo można podjąć HSL i po prostu zmniejszyć luminancji (i czy nasycenie) kanału o 20%. Przestrzeń kolorów HSL jest bardziej intuicyjna, gdy robimy takie rzeczy, jak przyciemnianie/rozjaśnianie kolorów.

function colorWheel($alpha) { 

    "hsla($h,$s,".$l*$alpha.",1)"; 
    // or 
    // ("hsla($h, "+$s*$alpha+", $l, 1)";) 
    … 
} 

Wszystkie te (nieco) różne wyniki.

Miejsca kolorów można konwertować na siebie za pomocą niezbyt skomplikowanych formuł. Być może powinieneś rzucić okiem na losowy colorpicker (np. this one lub that one), a następnie zdecydować, jaki sposób obliczania najlepiej Ci odpowiada.