Question

this might be a tough question.

I have a php function that returns a color value in rgba() with an argument $alpha.

function colorWheel($alpha) {

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

So when calling …

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

… I get rgba(170, 135, 178, .8);

---

The problem I have with this is that the color is “transparent” and shows “overlays”.

However what I really like to have is just 80% of the color value!
Without any transparent overlays.

The question is now how to solve this?

Any creative ideas how to do that? I don’t need to use rgba() it’s just the easiest thing that came to my mind. Is there a CSS way not to blend overlaying shapes that have an alpha value?

Or is there a php solution to calculate a the 80% version of rgb(170, 135, 178)?
It is important that this calculation works dynamically with the function because there are more colors in the function – this is a follow-up question to “How to return a color-value based a date and random?”!

Thank you in advance.

Answer 1

that should do it:

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

well, that makes the color darker, if you want to make it lighter you have to put alpha to a value > 1, and also check if r,g or b goes over 255 and set it to 255 if it does