CSS还是PHP？ 颜色是原始的80％，但没有“透明度”？

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.

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

To simulate color with opacity you also need background color. Lets say, that R,G,B are background color components, and r,g,b are you color components. If you want to simulate opacity color on specific background, you should take corresponding values of same canal and add them with specific weights:

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

Lets take simple example. You want to get alpha = 0.8 on color rgb(r,g,b) = rgb(255,0,0) (red) on background rgb(R,G,B) = rgb(255,255,255) (white). That means, you need sum 80% your color + 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

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.