If you’re using the Chrome dev channel or the WebKit Nightlies, you might have noticed this already: previously, when you clicked the colored square on the left of a color code in the WebKit Inspector, it used to cycle through different color formats. That’s still possible when you shift-click it (alt-click on Windows), but a regular click will now spawn a color picker. It was on my WebKit Inspector wish list 2 years ago, and now seems to have finally made it in! No more need to switch to another app just to pick a color for an element on your page. It doesn’t allow you to sample colors on screen, but I presume that’s a lot harder to do.
Since you can easily customize the WebKit Inspector, I got rid of the confusing double background of the widget. Here are the selectors you can use for the color picker – though I’m not sure where the original yellow background is defined?
/* color picker styles */
background: #ffffc2 !important;
border: 0 !important;
You’ve probably come across the use of CSS filters as fallback techniques for RGBa colors or CSS gradients for example. They have their limitations and implications, but they do come in handy sometimes. They look something like this:
Maybe you’ve noticed these weird colors that have 8 instead of the usual 6 hexadecimal digits. Well, these are aRGB colors, used in Internet Explorer filters but also in Android development among others.
hexAlpha = Math.floor(decimalAlpha * 255).toString(16);
// rgba(255,255,255,0) = #00ffffff
// rgba(0,0,0,.5) = #7f000000
// rgba(255,255,0,1) = #ffffff00 = #ffff00 = #ff0
To make it even easier, there are several RGBa to aRGB convertors out there.