CSS or PHP? color that is 80% of original but without "transparency"?

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

The Question is what your definition of "80% of the color" actually is.

CSS has 2 color spaces available at the moment: RGB and HSL (which is actually supported pretty well).

You could do the following RGB calculation:

function colorWheel($alpha) {

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

Or you could take HSL and just reduce the luminance (and or Saturation) channel by 20%. The HSL colorspace is more intuitive when doing things like making colors darker/brighter.

function colorWheel($alpha) {

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

These all yield (slightly) different results.

The colorspaces can be converted into each other via some not too complicated formulas. Perhaps you should take a look at a random colorpicker(e.g. this one or that one) and then decide, which way of calculation suits you best.