Post by Breadcat on Mar 29, 2015 3:17:21 GMT
Hey there, I am Breadcat and today I am going to explain a bit about the Color Codes that we use in our templates ( ´ ▽ ` )ﾉ
It's important to know their differences especially when you want to create or edit your own template!
When designing web pages, or in this case, designing templates, we usually assign color values:
So what color is this box? It's a vibrant, completely saturated red. And while it's true that the color is simply RED, I have used three ways of assigning color values as I typed this. If you click Quote and check out the BBcode of this post, you'll notice the following:
The most common way of assigning a color value is...
ENGLISH!
We simply type the English word for a color. In the example above, the background-color property of my box is "red". But while this is so simple, it is also very limited. What if you don't want that super saturated red? You can't type "not too saturated red", or even a simple "brick red" won't be recognized by the browser because using English words is such an archaic form of assigning color values.
What did people do when they figured out the English words won't always work? They figured out how to use...
RGB!
RGB stands for RED, GREEN and BLUE. Why green and not yellow? Because our eyes process light differently from how colored substances work. That is, red+yellow+blue works when you are mixing colored substances (paint, pastels, Gatorade?!) but because we view computer screens via the light that our eyes capture, it has to project those colors using a color combination that our eyes and brains can process. That color combination is red+green+blue.
Disgressing... there is a color model specifically for printing which works based on the red+yellow+blue theory. It's called "CMYK" which is cyan (blue), magenta (red) and yellow (yellow!) while that K is "key", the key color which cannot be derived from the mixing of CMY. And what color is that? K (key) is the color "black". Unlike in RGB, setting all the values of CMY to "zero" does not create "black", and setting it to maximum intensity does not work either! Black is indeed a strange thing in printing and painting... okay, back to the topic!
In our example, red is: rgb(255,0,0)
RGB uses a 256 color palette. All three hues (red, green and blue) can be assigned a value from 0 to 255 (since you include 0, that goes up to a total of 256!) The value that you put determines the intensity of the color. In the example, since red is set to 255, it is at its maximum intensity. Green and blue are both set to 0 so we see no green or blue in our example.
RGB is also an ancient form of assigning color values but it does have its strong points. Because you can pick from 256 intensity values, that's a very fine level of customization. In addition to that, RGB color code works with the Alpha value. You can use the color code RGBA!
What's RGBA? Let's use my super cute face for this example:
RGBA works just like RGB except for the extra number at the end. In this case, you are not applying transparency to the whole red box and its content (the text), but only to the background color. A stands for alpha which is the amount of opacity/transparency that an object has. Alpha is a value from 0 to 1 only, with 0 standing for 0% opacity and 1 standing for 100% opacity. That is, Alpha set to 0 will make the color "invisible".
So after all of that, we come to the end of- wait, there's another way of assigning color values. It's the newest one!
HEX TRIPLET!
In our example, red is: #ff0000
Hex triplet is based on the hexadecimal number system (base 16 in computing). See all of those letters and numbers jumbled together? They actually stand for RGB. Let's break it down:
ff is the amount of RED
00 is the amount of GREEN
00 is the amount of BLUE
Since hexadecimal is base 16, you can only assign 16 values. We are including ZERO and so the only values that we can actually assign are 0 to 15. But because 10 to 15 become double-digits, they are given alphabetical equivalents: 10 is A, 11 is B, 12 is C, 13 is D, 14 is E and 15 is F. So using a hex triplet, we assign 00 as the least amount of intensity and FF as the maximum amount of intensity. 00 to FF in hexadecimal number system can be converted to 0 to 255 in decimal number system (base 10); looks familiar? That's the 256 palette which is also used for the RGB and RGBA color codes.
Why did they make this thingy when RGB was already in use? Mostly because it's easier to write. It can be shortened even further if you have a repeating value in your hues. For example, #ff0000 can be shortened to #f00 because you have ff for red, 00 for green, 00 for blue. You can't shorten something like #123456 though because there are no repeating values for red, green and blue. And you can't shorten something like #122356 because it's broken down to 12 for red, 23 for green and 56 for blue.
Thank you for reading!
If you liked this, please consider donating bread.
If you hated this... ╮(─▽─)╭
Constructive criticism and corrections are very welcome. Please try to make it concise so that I can understand what you want me to change.
Questions are also welcome but please keep it related to the topic.
It's important to know their differences especially when you want to create or edit your own template!
When designing web pages, or in this case, designing templates, we usually assign color values:
So what color is this box? It's a vibrant, completely saturated red. And while it's true that the color is simply RED, I have used three ways of assigning color values as I typed this. If you click Quote and check out the BBcode of this post, you'll notice the following:
[div style="width:50px;height:50px;background-color:red;"][/div]
[b style="color:rgb(255,0,0);"]red[/b]
[i style="color:#ff0000;"]RED[/i]The most common way of assigning a color value is...
ENGLISH!
We simply type the English word for a color. In the example above, the background-color property of my box is "red". But while this is so simple, it is also very limited. What if you don't want that super saturated red? You can't type "not too saturated red", or even a simple "brick red" won't be recognized by the browser because using English words is such an archaic form of assigning color values.
What did people do when they figured out the English words won't always work? They figured out how to use...
RGB!
RGB stands for RED, GREEN and BLUE. Why green and not yellow? Because our eyes process light differently from how colored substances work. That is, red+yellow+blue works when you are mixing colored substances (paint, pastels, Gatorade?!) but because we view computer screens via the light that our eyes capture, it has to project those colors using a color combination that our eyes and brains can process. That color combination is red+green+blue.
Disgressing... there is a color model specifically for printing which works based on the red+yellow+blue theory. It's called "CMYK" which is cyan (blue), magenta (red) and yellow (yellow!) while that K is "key", the key color which cannot be derived from the mixing of CMY. And what color is that? K (key) is the color "black". Unlike in RGB, setting all the values of CMY to "zero" does not create "black", and setting it to maximum intensity does not work either! Black is indeed a strange thing in printing and painting... okay, back to the topic!
In our example, red is: rgb(255,0,0)
RGB uses a 256 color palette. All three hues (red, green and blue) can be assigned a value from 0 to 255 (since you include 0, that goes up to a total of 256!) The value that you put determines the intensity of the color. In the example, since red is set to 255, it is at its maximum intensity. Green and blue are both set to 0 so we see no green or blue in our example.
RGB is also an ancient form of assigning color values but it does have its strong points. Because you can pick from 256 intensity values, that's a very fine level of customization. In addition to that, RGB color code works with the Alpha value. You can use the color code RGBA!
What's RGBA? Let's use my super cute face for this example:
THE WORDS ARE NOT TRANSPARENT!
RGBA works just like RGB except for the extra number at the end. In this case, you are not applying transparency to the whole red box and its content (the text), but only to the background color. A stands for alpha which is the amount of opacity/transparency that an object has. Alpha is a value from 0 to 1 only, with 0 standing for 0% opacity and 1 standing for 100% opacity. That is, Alpha set to 0 will make the color "invisible".
So after all of that, we come to the end of- wait, there's another way of assigning color values. It's the newest one!
HEX TRIPLET!
In our example, red is: #ff0000
Hex triplet is based on the hexadecimal number system (base 16 in computing). See all of those letters and numbers jumbled together? They actually stand for RGB. Let's break it down:
ff is the amount of RED
00 is the amount of GREEN
00 is the amount of BLUE
Since hexadecimal is base 16, you can only assign 16 values. We are including ZERO and so the only values that we can actually assign are 0 to 15. But because 10 to 15 become double-digits, they are given alphabetical equivalents: 10 is A, 11 is B, 12 is C, 13 is D, 14 is E and 15 is F. So using a hex triplet, we assign 00 as the least amount of intensity and FF as the maximum amount of intensity. 00 to FF in hexadecimal number system can be converted to 0 to 255 in decimal number system (base 10); looks familiar? That's the 256 palette which is also used for the RGB and RGBA color codes.
Why did they make this thingy when RGB was already in use? Mostly because it's easier to write. It can be shortened even further if you have a repeating value in your hues. For example, #ff0000 can be shortened to #f00 because you have ff for red, 00 for green, 00 for blue. You can't shorten something like #123456 though because there are no repeating values for red, green and blue. And you can't shorten something like #122356 because it's broken down to 12 for red, 23 for green and 56 for blue.
Thank you for reading!
If you liked this, please consider donating bread.
If you hated this... ╮(─▽─)╭
Constructive criticism and corrections are very welcome. Please try to make it concise so that I can understand what you want me to change.
Questions are also welcome but please keep it related to the topic.
