In additive color mixing primary colors are Red, Green and Blue (RGB).
Red = #ff0000
Green = #00ff00
Blue = #0000ff
Combining Red (#ff0000) and Green (#00ff00) makes Yellow (#ffff00)
Is there some formula to calulate the hex code of a color resulting from the combination of two others ?
Something like #ff0000 + #00ff00 when applied to such a formula gives #ffff00
You can add two HEX string like this in PHP:
$red = "FF0000";
$green = "00FF00";
$yellow = dechex(hexdec($red) + hexdec($green));
echo $yellow;
Live Demo
What that snippet is basically doing is converting the hex strings to numbers, adding them together, and then converting the sum back to a hex string.
Reference Links:
hexdec |
dechex
Related
How Can I pick a random color within a color hex range. I need to pick the gray shades only as seen in this link
Link for gray
Here's my code
$color = sprintf('#%06X', mt_rand(444,EEE));
Here's the error
Use of undefined constant EEE - assumed 'EEE'
As you can see on your link, Grays (or greys) have the same Red Green and Blue values, so you need to generate one 2 digit number and use that in in 3 positions.
Just picking a random number between 222 and EEE could end up with say 3F7 which is in the range but not a gray.
Why not this:
$n = mt_rand(0, 255);
background-color: rgb(<?= $n; ?>, <?= $n; ?>, <?= $n; ?>)
I am separating Red, Green, Blue and Alpha values of rgba color values using php the code work fine when i have integer value but get only decimal part even have a floating values
this is the code
$myRGBString = "rgba(132,15,153,0.7)";
sscanf($myRGBString, 'rgba(%d,%d,%d,%d)', $red, $green, $blue, $alpha);
Above Code return aplha value 0 not 0.7 how can i get floating values of alpha
Use %f instead of %d for the alpha value.
C:\Users\Niet>php -r "sscanf('rgba(132,15,153,0.7)','rgba(%d,%d,%d,%f)',$r,$g,$b,$a); var_dump($r,$g,$b,$a);"
int(132)
int(15)
int(153)
float(0.7)
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.
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.
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
I'm trying to visualize a data on a grid with cell values actually represented by color. Red means high and blue means low. I was so naive in thinking that PHP's dechex() will help me by simply getting the hexadecimal equivalent of the int and using it as background-color in CSS (I did apply the necessary padding of zeros for small values).
But it doesn't quite get me what I want. Is there an algorithm that will let me visualize this properly? Red means high, blue means low.
My current code is this:
<?php
$dec = (int) $map[$y][$x]["total_score"];
$hex = dechex($dec);
$color = ($dec <= 65535) ? (($dec) ? "00$hex" : "ffffff") :
(($dec <= 1048575) ? ("0$hex") : $hex);
?>
Notice what it does:
ff0000 in decimal is smaller than ff00ff but on color, the first will show red and the latter violet. I want red to represent very high decimals and blue very low decimals.
I think RGB is not the very best color model here. I'd go with HSL - supported by modern browsers: color: hsl(0.5, 0.5, 0.5) and easily to convert to RGB.
HSL let's you define saturation and lightness of the color and the color itself quite easily. Blue is 240 deg, red is 360 deg so all you have to do is to map "low" to 240, "high" to 360 and all mid-value to 240-360 range.
Replace Red with Green and Remove Green by masking with 0xFF00FF in order to keep Red and Blue only.
$color = $your_decimal_number_you_want_to_colorize; // for example $color is 0x00F777
$color = $color << 8; // color is 0xF77700
$color = $color + ($color & 0x00FF00); // color is 0xF77777
$color = $color & 0xFF00FF; // color is 0xF70077
Using the code above, if $a > $b then $a will be more red than $b.
I'm trying to figure out how to write a function that programmatically retrieves a background-color css attribute and creates two outputs (one slightly darker than the background-color, one slightly lighter).
The idea is being able to generate a very basic linear gradient from a single color selection.
Anyone have any ideas?
To scale a color correctly, you have to multiply each RGB value by a proportion. E.g., if your color is #00417b and you want a color that is 125% lighter color then you have to do this:
var dark = {r: 0, g: 65, b: 123};
var light = {r: Math.round(Math.min(dark[r]*1.25, 255)),
g: Math.round(Math.min(dark[g]*1.25, 255)),
b: Math.round(Math.min(dark[b]*1.25, 255))};
Compare the result for yourself: dark is #00417b, and light is #00519A, although it's perfectly valid CSS to describe them as rgb(0, 65, 123) and rgb(0, 81, 154) and probably easier too. By scaling colors in this way they will appear to be at the same level of saturation, something that simply adding or subtracting numbers will not achieve.
Be aware that since values are clamped at [0, 255], if you keep shifting colors, then feeding them back into this process, you can destroy information about the proportion of red, green and blue in the source color. For this reason, keep the original color saved and try to use that as your input each time.
Since your question asked specifically about gradients though, this is how you would go between two color values:
// Suppose you have a container which is X pixels high and you want to insert a 1-pixel tall
// element at each pixel, going vertically
var min = Math.min;
var max = Math.max;
var round = Math.round;
function get_color_for_height(startColor, endColor, height, row) {
var scale = row/height;
var r = startColor[red] + scale*(endColor[red] - startColor[red]);
var b = startColor[blue] + scale*(endColor[blue] - startColor[blue]);
var g = startColor[green] + scale*(endColor[green] - startColor[green]);
return {
r: round(min(255, max(0, r))),
g: round(min(255, max(0, g))),
b: round(min(255, max(0, b)))
}
}
// some psuedo-code using an imaginary framework
for(var h = 0; h < height; h++) {
var div = new Element('div');
div.height = 1;
div.backgroundColor = get_color_for_height(start, end, height, h);
container.insert('top', div);
}
To generate a darker or lighter vairant, a simple possibility is just to add or subtract a fixed number to all three componenents, capping it at 0 and 255/0xFF.