CSS or PHP? a color that is 80% of the original, but without transparency?

Question

This can be a tricky question.

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

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

Therefore, when called ...

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

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

---

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

However, what I really like is only 80% of the color value! Without any transparent linings.

The question is how to solve this?

Any creative ideas how to do this? I don't need to use rgba() , it's just the easiest thing that occurred to me. Is there a CSS way not to blend overlay shapes with alpha value?

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

Thanks in advance.

Answer 1

which should do this:

 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 need to put the alpha in the value> 1, and also check if r, g or b exceeds the value of 255 and sets the value to 255 if it

Answer 2

The question is what is your definition of 80% color.

There are 2 color spaces available in CSS: RGB and HSL (which is actually pretty well supported).

You can perform the following RGB calculation:

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

Or you can take HSL and just reduce the channel brightness (or saturation) by 20%. The HSL color space is more intuitive when you do things like the color is darker / brighter.

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

All of them give (slightly) different results.

Color spaces can be transformed into each other through some not too complex formulas. Perhaps you should take a look at a random colorpicker (like this or that one ), and then decide which calculation method works best for you.

Answer 3

To simulate a color with opacity, you also need a background color. Assume that R,G,B are the background color components, and R,G,B are the color components. If you want to simulate the color of opacity on a specific background, you must take the corresponding values ​​of the same channel and add them with specific weights:

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

Let's look at a simple example. You want to get alpha = 0.8 in color rgb(r,g,b) = rgb(255,0,0) (red) against the background of rgb(R,G,B) = rgb(255,255,255) (white). This means that you need to collect 80% of 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