Develop Reference

Issue with backward and forward to change colors in JavaScript

i am having this problem when i try to change colors in my small app. But first, i am trying to make a small app to generate random colors and save them to be able to use a backward and forward button.
I'll put a link to codepen if you want to see it in action and understand it way better.
Link: random colors app
My problem: after generating two colors and i click backward i get the same color (Yes, i know that i'm using a .pop() method to get current color), and i have to click it twice to see the change.
So, my question. Should I use another "logic" to get my colors instead of .pop() and .push() methods?
I'll appreciate all the help!

Here's why you're having this issue! Took me a little to figure it out...
When you generate a new color, you're immediately setting the new color as your current color. And what happens after? You're pushing it to the backwardStack array!
This means that when you turn RED, then GREEN...
Generate RED, set as current color, then immediately push RED to backward stack
Generate GREEN, set as current color, then immediately push GREEN to backward stack
Backward should only be available once at least 1 color has passed, not immediately upon adding a color. Meaning that you should...
// Reverse the order of these actions!
// Action 1
changeColor(hexColor);
currentColor = hexColor;
console.log("Current color: " + currentColor);
// Action 2
if (currentColor) {
backwardStack.push(currentColor);
}
//----------------------
// Action 2
if (currentColor) {
backwardStack.push(currentColor);
}
// Action 1
changeColor(hexColor);
currentColor = hexColor;
console.log("Current color: " + currentColor);
Which basically says:
Before I set a current color, do I have a current color? If yes, push to the backwardStack. If I have no current color, don't push to the backwardStack and still set my current color. That means on the first color generate, the backward button should not become clickable.
This is also the reason why every time you generate a color, the backward button has to then be pushed twice!
Hopefully this helps.

FPDF - SetFillColor inside cell

I have the need to create the cell with background color, but I was using the example:
$pdf->SetFillColor(135,206,235);
$pdf->Rect(9, 52, 190, 7, 'F');
the problem with this example is that if I get a larger than expected number of lines, it does not usually fit as it is, so how can I define the color of the cell I'm using without putting XY in its location? it's possible?
Original Code:
$pdf->SetFont('Arial','B',12);
$pdf->Cell(96 ,10,'RLT Resume',0,0);

using this code i was able to fix my problem, the terms was bad on start:
$pdf->SetFont('PetitaBold','',12);
$pdf->SetFillColor(70,130,180);
$pdf->SetDrawColor(25,25,12);
$pdf->SetTextColor(255,255,255);

CSS selector by color regardless of representation

I want to select all elements on my page with a certain color, let's say red.
I know I can do it like this: $("div[style=color:rgb(255,0,0)]"). However, my problem is that there are different representations of the color red, e.g. #FF0000 and simply red. But also any number of white spaces in rgb(255, 0, 0) still defines the color red.
I need to do it in a general way which would work for any color and will accept any representation of that color. Is there a way to define such a "smart" CSS selector?

I'm not sure I understand the problem. You want to filter only when the color is 'red' (literally, #FF00000)? Or also kind of for example 'darkred' will be included in your filter?
In the first case I don't really see a problem and a solution of kukkuz could work with some improvements.
According to what I know you cannot do that with CSS selectors

By using this type of selector you are telling jquery to search for a string/sub string that contains the word that you are looking for.
But the options are endless.
Because you are searching for a string you have to consider all possibilities, including white spaces, different character sizes, more style attributes other then color that can contain number like 0 or 255 or ff or 00 etc...
This is not possible with the current support of selectors...
But if you will use jquery to get all elements and then check their color/background-color, you will get a true color representation.
it doesn't matter how the style is written, the browser will return back a color(it can be in hex or rgb depending on the browser).
I think that this behivor derives from the w3c rules...
a non elegent soulation would look like this:
$('div').each(function(){
if($(this).css('color') == "rgb(255, 0, 0)" || $(this).css('color') == "#FF0000"){
$(this).css("color","green");
}
if($(this).css('background-color') == "rgb(255, 0, 0)" || $(this).css('background-color') == "rgba(255, 0, 0, 0)"){
$(this).css("background-color","green");
}});
Fiddle: https://jsfiddle.net/zdu1adr7/4/
This one works on chrome,firefox,edge,ie 11/10/9.

How can I automatically determine colors similar to white?

I'm looking for either a list of colors in hex code format or certain patterns of hex codes that are whitish colors/shades of white.
I've been using the Wikipedia Shades of White list but I don't think it's complete and ideally I would like some sort of regex pattern of whitish colors.
I'm not very clued up on colors so excuse me if this is an ignorant question.

Maybe this function can be of help to you?
What it does is test if the value is white(above r/g/b value 200) or not. If any of the supplied rgb values in #FFBBEE calculates to a number lower than 200 it will fail the test.
This is a very very crude test, but as you kinda lack details on what you exactly want, this might be a good starting the point.
At least the function gives you the method to convert it into integer values, which you could use again to calculate in a nicer format like HSL which will allow you to do better brightness checks.
See this answer if you want to go that direction
The other answers explain what RGB is and how this is all combined in the colour code you use, especially the answer by user1203738
function isWhite(str) {
// fiddle this value to set stricter rules for what is white.
var whiteLimit = 200,
r,g,b;
r = parseInt("0x"+str.substring(1,3));
g = parseInt("0x"+str.substring(3,5));
b = parseInt("0x"+str.substring(5,7));
if(r < whiteLimit || b < whiteLimit || g < whiteLimit) {
return false;
}
return true;
}
// use this function like this. supply it a colour code with a # in front of it
isWhite("#FFFFFF");
<input type="text" value="#FFFFFF" id="colorcode">
<input type="button" value="test if this is white" onclick="document.getElementById('showcolor').style.backgroundColor = document.getElementById('colorcode').value;document.getElementById('showcolor').innerText='Shade of white:'+isWhite(document.getElementById('colorcode').value);">
<div id="showcolor" style="display:block;width:200px;height:200px;margin:50px;border 1px solid black;background-color:#AAA"></div>

The hexcodes represent a mixture Red, Green and Blue light.
#FFFFFF translates to white, with FF red, FF green and FF blue.
you can convert the hex FF value back to 255,
Think of it as if you've got 3 coloured lamps; Red, Green and Blue.
You're gonna mix these lights together. The hex values determine the intensity of each lamp.
#000000 would be black. No lights are turned on.
#FF0000 would be full red. Only the red light is turned on.
#FFFF00 would give you yellow. The Red and Green light are turned on (and combined to make yellow)
#FFFFFF would give you a white. All the lights turned on,
#AAAAAA would give you a gray color, All the light are on but dimmed a little.
#FFFFF0 Would give you yellow-white color, All light a on, but the Blue lacks some intensity.
I advice you to try out a color picker and see what it means to change these values.
whitish colors/shades of white is very broad, as klaar mentioned in the comments, you should define what is white.
In general, Red, Green and Blue values which are close to each other and above 200 'intensity' will appear whitish.
It might be easier for you to convert the RGB value to HSL, (which is out of the scope of this question). since the H(ue) value is irrelevant, The S(aturation) should be low (to be void of color). And the L(ight/brightness) value should be high in order to appear white.

This won't be perfect, but it might get you close:
Step 1: Convert the color name to RGB hex.
Step 2: Check if the first character of each of the Red, Green and Blue hex values is e or f. This could be done as a regular expression, e.g.:
/^#([ef][a-f0-9]){3}$/i
For more examples of what are considered shades of white, see See also Encycolorpedia. This question is more relevant to the Graphic Design community.

Is there a way to compare 2 colors in JS, like 'If Color A is darker than #202020'

The background color for one of my pages is set pulled from the background color the users set as their twitter background color. I have a page that has a rounded box with a black border. The border doesnt look good if the background color is dark, so i'd like to remove the border of the background is darker than an arbitrary hex color.
The way I was thinking about doing this was using a regex to pull the 3 RGB values and summing them, and comparing that to my reference color. Is there a better, way to accomplish this?

You could write a function that converts between RGB and HSL or HSV, and use the lightness or brightness value.
Wikipedia has the math for HSV -> RGB conversion, but not the other way.
http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
You could also probably pull some JS from this page.
http://www.csgnetwork.com/csgcolorsel4.html

You may also need take in account perceptual brightness of colors (i.e. bright-blue #0000FF looks much darker than bright-red #FF0000 which in turn is much-much darker than #00FF00).
So I'd split the color value into separate bytes and then multiply each by some coefficient:
function getPerceptualBrightness(color) {
var r = parseInt(color.substring(0,2),16);
var g = parseInt(color.substring(2,4),16);
var b = parseInt(color.substring(4,6),16);
return r*2 + g*3 + b;
}
var green_b = getPerceptualBrightness('00A000');
var blue_b = getPerceptualBrightness('0000FF');
if (green_b > blue_b)
{
alert("Green is brighter though it's numerical value is smaller");
}
This may be less precise than converting to HSL but the latter feels like an overkill for the task...

If the rounded corners are images, this is better treated as a photoshop problem. Save for web/png-24/transparency dither.
If I understand your problem correctly it's not just an issue of light and dark but of hue too. Those corners are dithered to a background that doesn't match these alternate ones. By that I mean the rounded edges are slowly faded from the border to the background color so the jagged pixel edges don't appear to be as jarring.
An arbitrary light/dark solution where you average the three and compare would only work well with fairly extreme lights and darks I would imagine but with a png transparency dither they'll soft-blend into any background automatically. There are workarounds for IE 6 if you have to support it.

You may be able to use the luminance of the color. jPaq offers this function. Still, I am not sure that this is what you are looking for. Here is Wikipedia's definition of luminance: http://en.wikipedia.org/wiki/Luminance.