Develop Reference

Random RGB color generator with JavaScript

I am trying to get something like this:
rbg(random, random, random);
Now when I put in Math.floor(Math.random() * 255) + 1 into the area, it works but for some reason most of the numbers are stuck in 255 and rarely change.
My code is:
function colorGen() {
document.getElementById("color1").style.backgroundColor = 'rgb('+
Math.floor(Math.random() * 255) + 1 + ',' + Math.floor(Math.random() * 255) + 1
+',' + Math.floor(Math.random() * 255) + 1 +')';
}
When I put brackets () around - ( Math.floor(Math.random() * 255) + 1 ) -, it works much better.
Why is this so?

#Xufox has the right answer in the comment there. For clarity, you'll want to restructure your code a little (and let's also fix that bug where you'll never get zero for any channel due to the +1):
function colorGen() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
document.getElementById("color1").style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}

When you use +1 inside a string it will generate as string and not as mathematical expression when you use () it generate as mathematical expression.
My reccomand:
Use params to random colors
function colorGen() {
var color1=Math.floor(Math.random() * 255) + 1;
var color2=Math.floor(Math.random() * 255) + 1;
var color3=Math.floor(Math.random() * 255) + 1;
document.getElementById("color1").style.backgroundColor = 'rgb('+ color1
+ ',' + color2
+',' + color3 +')';
}
<button id="color1" onclick="colorGen()">click me to change color</button>

When you “add” 1, it gets concatenated as a string, since you’re starting with "rgb(" +, and the result of “string + number” will be another string. Wrapping numerical expressions in parentheses makes the + operator do addition instead of concatenation.
The reason you get 255 is because the numbers you generate end up looking like this:
11
21
31
41
…
2531
2541
2551
The backgroundColor setter caps 8-bit values (ranging from 0 to 255) at a maximum of 255 (and a minimum of 0). This means, setting element.style.backgroundColor = "rgb(10000, -10000, 128)" results in a backgroundColor of "rgb(255, 0, 128)"
So when Math.floor(Math.random() * 255) generates a number from 1 to 25, then the highest resulting number becomes 251, which is below 255. Any other value — i.e. from 26 to 255 — results in a value higher than 255, so it just becomes 255 automatically.
The parentheses make the arithmetic expression to be evaluated before the concatenation.

JavaScript conversion to Float32Array and back for WebGL readPixels

I am storing id (which is a value comprised in 24bit-range) into an Float32Array(3) for latter retrieval in WebGL:
var r = 0,
g = 0,
b = id;
if (b >= 65536) {
r = ~~(b / 65536);
b -= r * 65536;
}
if (b >= 256) {
g = ~~(b / 256);
b -= g * 256;
}
var fa = new Float32Array([r/255, g/255, b/255]);
For the sake of completeness, here is how i am using that value:
gl.uniform3fv(uniforms['u_id'], fa);
...and this is how i get my id back from WebGLRenderingContext.readPixels():
var result = new Uint8Array(4);
gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, result);
var id = result[0] << 16 | result[1] << 8 | result[2];
Which is the correct way to split that value into my Float32Array? I strongly believe that such task could be accomplished in a more efficient and elegant way (actually, what i am doing is working but is really hurting my eyes).

id has a form like this:
0000 0000 rrrr rrrr gggg gggg bbbb bbbb
A part (r, g or b) can be extracted by putting it in the lowest byte and masking the rest away. Sometimes one of those steps is unnecessary. So:
b = id & 255 // b is already in the low byte, so no shift
g = (id >> 8) & 255
r = id >> 16 // no mask because there is nothing "above" r
This can be put together with the division and putting it in an array:
[(id >> 16) / 255, ((id >> 8) & 255) / 255, (id & 255) / 255]

Converting rgba values into one integer in Javascript

I can already convert 32bit integers into their rgba values like this:
pixelData[i] = {
red: pixelValue >> 24 & 0xFF,
green: pixelValue >> 16 & 0xFF,
blue: pixelValue >> 8 & 0xFF,
alpha: pixelValue & 0xFF
};
But I don't really know how to reverse it.

To reverse it, you just have to combine the bytes into an integer.
Simply use left-shift and add them, and it will work.
var rgb = (red << 24) + (green << 16) + (blue << 8) + (alpha);
Alternatively, to make it safer, you could first AND each of them with 0xFF:
var r = red & 0xFF;
var g = green & 0xFF;
var b = blue & 0xFF;
var a = alpha & 0xFF;
var rgb = (r << 24) + (g << 16) + (b << 8) + (a);
(You may use bitwise OR | instead of + here, the outcome will be the same).

Calculate color HEX having 2 colors and percent/position

Is it possible to calculate a color in a middle of a gradient?
var color1 = 'FF0000';
var color2 = '00FF00';
// 50% between the two colors, should return '808000'
var middle = gradient(color1, color2, 0.5);
I only have two hex strings, and I want one in return.

This should work:
It basically involves converting them to decimal, finding the halves, converting the results back to hex and then concatenating them.
var color1 = 'FF0000';
var color2 = '00FF00';
var ratio = 0.5;
var hex = function(x) {
x = x.toString(16);
return (x.length == 1) ? '0' + x : x;
};
var r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio));
var g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio));
var b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio));
var middle = hex(r) + hex(g) + hex(b);

An ES6 version with comprehensions:
function interpolateColor(c0, c1, f){
c0 = c0.match(/.{1,2}/g).map((oct)=>parseInt(oct, 16) * (1-f))
c1 = c1.match(/.{1,2}/g).map((oct)=>parseInt(oct, 16) * f)
let ci = [0,1,2].map(i => Math.min(Math.round(c0[i]+c1[i]), 255))
return ci.reduce((a,v) => ((a << 8) + v), 0).toString(16).padStart(6, "0")
}
As in the accepted answer, c0,c1 are color codes (without the leading #) and f is "progress" between the two values. (At f=0 this ends up returning c0, at f=1 this returns c1).
The first two lines convert the color codes into arrays of scaled integers
The third line:
"zips" the two integer arrays
sums the corresponding values
rounds the sum and clamps it to 0-255
The fourth line:
converts the integer array into a single integer (reduce and bitshifting)
converts the integer into its hexadecimal string form
ensures the resulting string is 6 characters long and returns it

I can't comment on the answer above, so I write it here:
I found out that in the Javascript substring method the to parameter index is not included in the returned string. That means:
var string = "test";
//index: 0123
alert(string.substring(1,3));
//will alert es and NOT est
Edit: So it should be:
parseInt(color1.substring(0,2), 16);
parseInt(color1.substring(2,4), 16);
and
parseInt(color1.substring(4,6), 16);

You can use this ready function (ES6):
const calculateMiddleColor = ({
color1 = 'FF0000',
color2 = '00FF00',
ratio,
}) => {
const hex = (color) => {
const colorString = color.toString(16);
return colorString.length === 1 ? `0${colorString}` : colorString;
};
const r = Math.ceil(
parseInt(color2.substring(0, 2), 16) * ratio
+ parseInt(color1.substring(0, 2), 16) * (1 - ratio),
);
const g = Math.ceil(
parseInt(color2.substring(2, 4), 16) * ratio
+ parseInt(color1.substring(2, 4), 16) * (1 - ratio),
);
const b = Math.ceil(
parseInt(color2.substring(4, 6), 16) * ratio
+ parseInt(color1.substring(4, 6), 16) * (1 - ratio),
);
return hex(r) + hex(g) + hex(b);
};
//////////////////////////////////////////////////////////////////////
console.log(calculateMiddleColor({ ratio: 0 / 5 })); // ff0000
console.log(calculateMiddleColor({ ratio: 5 / 5 })); // 00ff00
console.log(calculateMiddleColor({ ratio: 2.5 / 5 })); // 808000
console.log(calculateMiddleColor({ ratio: 4.2 / 5 })); // 29d700

javascript shifting issue (rgb and rgba to hex)

I found a RGB to hex converter and I'm trying to make a RGBA to hex converter. The original rgb2hex function works but the new rgba2hex function does not. What am I doing wrong? The rgba function is returning gba, no r.
// convert RGB color data to hex
function rgb2hex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
// convert RGBA color data to hex
function rgba2hex(r, g, b, a) {
if (r > 255 || g > 255 || b > 255 || a > 255)
throw "Invalid color component";
return ((r << 32) | (g << 16) | (b << 8) | a).toString(16);
}
Example:
alert(rgb2hex(255, 155, 055));
alert(rgba2hex(255, 155, 055, 255));
Current output: ff9b2d and 9b2dff
Expected output:ff9b2d and ff9b2dff

Your issue is that bitwise math in JavaScript caps out at 31 bits, so you can't quite do this as is. You need to use normal math ops, not bitwise ops:
// convert RGBA color data to hex
function rgba2hex(r, g, b, a) {
if (r > 255 || g > 255 || b > 255 || a > 255)
throw "Invalid color component";
return (256 + r).toString(16).substr(1) +((1 << 24) + (g << 16) | (b << 8) | a).toString(16).substr(1);
}
Also fixed an issue with the original algorithm where if the first component is < 10, the output doesn't have enough digits.
Anyway, this won't work anyway... #ff9b2dff isn't a valid color, but you may not care?

RGB to HEX
rgb(0 255 94)
rgb(0, 255, 94)
RGBA to HEX
rgba(255,25,2,0.5)
rgba(255 25 2 / 0.5)
rgba(50%,30%,10%,0.5)
rgba(50%,30%,10%,50%)
rgba(50% 30% 10% / 0.5)
rgba(50% 30% 10% / 50%)
DEMO - CODEPEN.IO