Why does RGB use 6 hex digits? - css

I understand that RGB encodes a color with two hex digits corresponding to the Red, Green, and Blue components. For instance, #ff0000 is pure red. And I understand that each hex digit represents a number from 0-15, or 4-bits of information. But how is it possible to represent every color with 32-bits? Why use two digits for Red and Green and Blue? Why aren't there, for instance, three digits per color?

I dont really know if any of this is related to hardware and whether we can even make colors to such detail but a third hex digit for colors means we will have colors with 4096 times more detail, (meaning if we have X color combinations currently, then we will have 4096 * X colors) which we simply dont need, since human eye wont be able to notice the difference, even in our current color system, let alone one much bigger.
So you'd be sacrificing efficiency for nothing in that case, like watching a movie on 600 frames per second while your eye can only process 60.

Related

Trying to make total color of image, not good at programming

I'm working on a spectroscopy project though its taking way too long. I haven't found any program online that can do what I need and I don't know how to do it myself. What I need is a program that takes an image(from the hard drive) and adds the rgb values in DEC out of 255 of every pixel, returned individually in red, green, and blue. Additionally, although I can do this part on my own, the values then need to be multiplied by 255 divided by the greatest value and converted to HEX as to retrieve a kinda total color of the entire image. (NOTE: I do not want an average color of the image, I tried that and it only returns neutral colors)
By googling for 2 minutes I found this:
https://itg.beckman.illinois.edu/technology_development/software_development/get_rgb/
No idea if it works but it looks like it does what you want.

Why are colors represented by hexadecimal values in CSS? Is there an historical explanation?

In some programming languages, colors are represented by hexadecimal values. For example, using CSS, to change the text color of a header to maroon-ish, you could type:
h1 {
color: #8B1C62;
}
I'm wondering what the reason is for using a base-16 numeral system to represent colors. You could hypothetically use any numeral system to represent the same values, no?
When did this convention start? Does anybody know where I can read about the history of this phenomenon?
The primary use of hexadecimal notation is a human-friendly representation of binary-coded values in computing and digital electronics.
each hexadecimal digit represent 4 bits. half the byte.
a byte value can be in range of 0 to 255 in decimal but it is more easier to read it as 2 Hexadecimal digit from 00 to FF.
a 6 digit color code hold 256X256X256 combination of red, green and blue ! (8-Bit RGB)
read more about color, color spaces and hexadecimal :
http://www.smashingmagazine.com/2012/10/04/the-code-side-of-color/
http://en.wikipedia.org/wiki/Hexadecimal
http://en.wikipedia.org/wiki/RGB_color_model
You can certainly represent colors in any numeral system. Here's what your maroon-ish color looks like in various different systems:
Binary: 10001011 00011100 01100010
8 bits each for red, green, and blue. That's nice, but who wants to type all those numbers?
Decimal: 9116770
Fewer numbers to type, but how do you manipulate R, G, and B individually? And it feels kind of weird to refer to a color as nine million, one hundred sixteen thousand, seven hundred seventy.
Hexadecimal: 8B 1C 62
Even fewer numbers to type, and we can manipulate R, G, and B easily. Seems like a good candidate for representing colors, but let's try one more.
Base-256: ï [^\] b
Nice: we only have to type one character per color component. But I can never remember what number comes after ï or before the file separator control code, so I'd have to whip out the ASCII table every time I write or read a color. But what if we wrote the components in decimal instead?
Base-256, redux: 139,28,98
Much nicer. Not too many characters to type, and it's very clear which numbers represent R, G, and B.
Thus...
The two common ways to represent color values are hexadecimal and base-256-ish, because... it's easy!

Is there a formula to get distinct colors in RGB representation

A color can be represented as mixture of Red,Green and Blue.
Ex: (255,51,153)=pink
Is there an any good formula to get distinct colors by changing one variable?
such as (10x,22x,2x^2). So when x=1,2,3,4,.... It will give separate colors like Red,Green,Cyan,Blue.....etc.
Perhaps you'd be more interested in using HSL/HSV colors. Define the saturation and lightness and adjust the hue to get different colors. Check out the HSL and HSV wiki to learn more. A 15 to 30 degree adjustment of hue will result in a distinctly different color without messing with saturation or lightness.
An example of hsl in CSS is as follows.
<h1 style="color:hsl(0,50%,100%);">HSL Test</h1> //this will be red
The first value at 0 is red and advancing by 120 degrees will bring you to green and another 120 will bring you to blue and the last 120 will bring you back to red since the degree system is based on the 360 degrees of a circle. So 0 and 360 are the same just 60 & 420. The next two values are percentage based from 0% to 100% to define the intensity of that property. They're hard to explain so I made a quick fiddle that demonstrates this.
So to answer your question there is a good formula to adjust color it just depends on how exactly you want to change it. In the RGB world you can make things darker by lowering values uniformly and the opposite by heightening them. You can increase the different color presences by adjusting the individual color values as expected. However if you're trying to cycle the entire color wheel then this is difficult (although entirely possible) using RGB values. The real lesson to take away is that there are a number of ways to define a specific color and with each one different ways to traverse the spectrum. HSL and HSLA are very intuitive for many people since it's values don't really have to be guessed at. Pick a specific hue off the color wheel, Remember ROYGBIV as you imagine a value from 0-359. Define a saturation based on how bold you want the color to be and then a lightness based on how bright. It's far more useful then RGB in the large majority of cases as you'll see in that fiddle. Making a subset of the entire color spectrum with javascript only takes a few lines of code.
There is a similar question here
This javascript library can help you Name the Color Javascript Lib
A Demo of the library

why do I not find a LAB color cube?

I use the R colorspace package to convert a three-dimensional point into a LAB color. The LAB color is defined with three coordinates, the first one ranges from 0 to 100 and the two other ones range from -100 to 100.
But searching with Google I do not find a cuboidal representation of the LAB color space. Why ?
Short answer
The LAB color space, a.k.a. gamut, contain colors that are impossible to reproduce in nature or on a screen (according to this page).
Elaboration on converting RGB to LAB
I guess the reason you ask is that you want to make some kind of printed material and want to be sure the colors turn out right. I am merely an enthusiastic amateur in this field, but think this paragraph from the wikipedia article on lab color space explains some of the complications.
There are no simple formulas for conversion between RGB or CMYK values
and L*a*b*, because the RGB and CMYK color models are device
dependent. The RGB or CMYK values first need to be transformed to a
specific absolute color space, such as sRGB or Adobe RGB. This
adjustment will be device dependent, but the resulting data from the
transform will be device independent, allowing data to be transformed
to the CIE 1931 color space and then transformed into L*a*b*.
That is, in order to create a lab color cube, you must first find the transformation from your monitor specific color space into absolute color space. This is surprisingly difficult since the mapping is not linear or on any other simple form. The transformation is not likely to be perfect either since the RGB and LAB spaces do not span the same subspace (speculating here). I once talked to a printmaker about this and he said altough the human eye only has 4 types of color receptors (RGB + light intensity) you need about 17 color components on generate the full spectrum of visible colors on paper. Both RGB and LAB compromises on that, optimized for different purposes.
Bottom line
You can calibrate your screen to set up the transformation needed to convert the RGB of the screen to the LAB colors of human eyes, and then go on to make a color cube. However, it will only apply to your very monitor and not be perfect. You are best off test printing different color profiles and choose the one you like best.
Because there is no such thing. The CIELAB colour space has a Cartesian representation (of infinite size), but the (finite) gamut that we can perceive is not cubic, it has a complicated shape. Varying the two coordinates a* and b* independently in a pre-defined range may seem convenient, but this is fundamentally not the way human perception works.

Get hex codes for all colors between two colors?

I want to have buttons that are switching from one color to another.
Eg. 1000 buttons where the first one is yellow and the last one is green and all the between will slowly move from yellow to green.
How can I generate all the hex codes for colors (eg. #8a3a3a) between these two colors?
Split the two input colors into red, green, blue components and convert them to float. Subtract source components from destination components, divide each by 1000 and call them f.ex. deltaRed, deltaGreen, deltaBlue. Start with source components, convert those into a "#rrggbb" string 1000 times, each loop adding the deltas. If you want to actually reach the destination color, you have to loop from 0 to 1000, ie. 1001 times.
Yes, it is. You can compute it as follows:
Imagine the colors are points in a three-dimensional space, with each component (red, green, blue) representing one dimension. Depending on how many color tones you want between the two colors, you can try to evenly divide the differences between the two colors, for each component separately. For instance, if rA is the red component of color A, and rB the red component of color B, and if you want 10 steps in between, then the red component of the second step is r2 = (rB - rA) * 2 / 10.
Convert the components to decimal first (e.g. 8a => 138), and you should probably write a small program for the computation. I don't think you need so many tones though, because each component has only a range from 0 to 255 (rounding necessary), and the human eye cannot differentiate between so many colors anyway.
This may be what you need: http://sandbox.leigeber.com/fader/fader.html
Code: http://www.leigeber.com/wp-content/uploads/2008/05/fader.zip

Resources