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.
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; ?>)
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 want to use a range of colors using the value of RGB values
Suppose rbg of black color in ideal condition is rgb(0,0,0) but when i scan any image.It's color range varies from 0 to 51 like rgb(31,31,31),rgb(49,49,49) etc
what i required to use a color range for condition
if(r=0 to 51 && g=0 to 51 && b=0 to 51)
condition execute
Another thing all three values ie rgb should have similar value for example:-rgb(0,0,0) rgb(31,31,31)etc
so that combine color resembles black color
Making sense?
Im using PHP
You can transform the RGB color first to HSL, with HSL you can compare Hue, Saturation and Luminance of colors.
Comparing the Hue of two colors, gets all colors that are for example blue(ish). Black and White are a bit special in this case, you could test for extreme Luminance (near 0% or near 100%) for black/white, or low Saturation (near 0%) for grey colors.
Can't you just to some comparisons of the values to determine if they fall in the black spectrum of RGB? Such as:
$rgb = array("R" => 0, "G" => 0, "B" => 0);
if($rgb->R >= 0 && $rgb->R <= 51 && $rgb->G >= 0 && $rgb->G <= 51 && $rgb->B >= 0 && $rgb->B <= 51) {
// RGB value is in black spectrum
}
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
Is it possible to classify html hex colours into simple string values??
For example, the colour #CC3333, it's not completely red, but as a human we can assume that it's red. The colour #CCCCCC can be classified as white, because I don't want black or grey involved.
Possible simple values at least consist of:
red
white
green
More classification is better, but I want at least these colours.
Can it be done?
Optional info:
I'm creating a web apps that capture the pictures through webcam. The user can hold a white or red paper to the webcam and the apps detect the image's major colour. Then the user will be redirected to a different options depending on their colour. I've done the colour detection, but I just want classify it into several colour only, red,white,and green.
This is a somewhat subjective question, because yes it can be done, but exactly how you would do it would depend on your specific application - colour itself is very subjective in the way that it is observed by the individual.
You would need to start by splitting the string into it's red, green and blue components:
$colourId = 'CC3333';
list($red, $green, $blue) = str_split($colourId, 2);
Then, it would probably be an idea to convert them to integers:
$red = hexdec($red);
$green = hexdec($green);
$blue = hexdec($blue);
Then you need to apply some sort of logic to it to determine which one of your classes it falls into. How you do this is really up to you, but maybe you could do something like this:
if (max($red, $green, $blue) - min($red, $green, $blue) < 10) {
// If the values are all within a range of 10, we'll call it white
$class = 'white';
} else if (max($red, $green, $blue) == $red) {
// If red is the strongest, call it red
$class = 'red';
} else if (max($red, $green, $blue) == $green) {
// If green is the strongest, call it green
$class = 'green';
} else if (max($red, $green, $blue) == $blue) {
// If blue is the strongest, call it blue
$class = 'blue';
}
it's hard to classified the color in RGB model it's better convert the color to HSL or HSV model , and then you can classified the color. for more information you can look at:http://en.wikipedia.org/wiki/Color_model
You first need to convert the hex format to rgb values. A simple Google search turned up this page. I haven't tested it, but if it doesn't work correctly then I'm sure you can find a different one that does.
Once you have the rgb values, you need to define your color ranges. The following code creates color ranges at every interval of 63.75 (that's 4 ranges per color, so 4*4*4 = 64 total ranges):
function findColorRange($colorArray){
//assume $colorArray has the format [r,g,b], where r, g, and b are numbers in the range 0 - 255
for($i = 0; $i < 256; $i += 51){ //find red range first
if($colorArray[0] <= $i + 51/2 && $colorArray[0] >= $i - 51/2){
for($n = 51; $n < 256; $n += 51){ //green
if($colorArray[1] <= $n + 51/2 && $colorArray[1] >= $n - 51/2){
for($z = 51; $z < 256; $z += 51){ //blue
if($colorArray[2] <= $z + 51/2 && $colorArray[2] >= $z - 51/2){
return array($i,$n,$z);
}
}
}
}
}
}
}
The above function would return an array that defines the color range of the color in question. From there, you could map the possible ranges to whatever strings you want. This would probably be most easily achieved by creating an associative array where the keys are the r,g,b values, and the values are the string. For example:
$colorMap = array(
'0,0,0' => 'white',
'51,0,0' => 'light gray'
)