Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
Before we begin, I will need to explain a few things for those that might be unfamiliar with terms. So, when it comes down to coding colors in CSS/HTML, you will need to know what is called a hexadecimal code.
What is a hexadecimal code?
Well, getting nerdy here, hex[a] basically means "six." So, it's basically a 6 number code in a sequence or order that represents a particular color. I'm not going to go into any other detail on that because we don't need to. You can always ask Dr. Google or Dr. Wiki for more information.
As you are learning CSS/HTML you'll find yourself pretty much memorizing many of these codes.
#000000 is Black
#ffffff is White
#ff0000 is Red
So, what about other colors, such as... charcoal? Or cerulean? Or even chartreuse? They exist as hexadecimal codes as well, but trying to remember all the color codes is impossible. You'll remember a few - your favorites and basic primary colors - but not the whole color wheel that exists.
A little trick...
There is a small and nifty trick that you can use with some hexadecimal codes. For codes that use the same letter or number for the entire code (such as #000000) you can shorten these to only three numbers (#000) and it will work just the same.
This trick will not work on codes that are repeating (such as #808080) or mixtures of letters and numbers (#007ba7). If you shorten these, they will not give you the color of their full code.
Now, here is where - if you so desire - to skip as the next few sections are more to help you select colors and other things. This is a quick and dirty color explanation.
Color Schemes and Color Palettes
Alright, we're getting back into terminology again and introducing color theory. If you've ever taken an art class, you should be familiar with color theory. Because I am lazy and if I really went into explaining color theory, I'd need to write a whole tutorial just on that; so here is a quote from Dr. Wiki, "In the visual arts, color theory or colour theory is a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also definitions (or categories) of colors based on the color wheel: primary color, secondary color and tertiary color."
(Don't even get me into RGB vs CYMK.)
We don't even need to get into the categories either. What I want to focus on from that quote is "practical guidance to color mixing and visual effects of a specific color combination." While we are not mixing colors, we do need to take into consideration the visual effects of color combinations. When people put the colors red and green (which by the way are complementary colors) you think of Christmas perhaps. And while colors are entirely subjective; you still need to choose wisely. (Trivia: Did you know there are forbidden color combinations regarding creating advertisements? Well, not forbidden, but definitely not encouraged.)
So, that's where color schemes can come into play to help you. Now, there are actually different types of schemes. (Got a headache yet?) But I'm not going to go into those either; you can read about them here. However, you can search for color schemes that you like and want to use
Now, as for what a color palette is (yes, it is different from a scheme). A palette is created when you select colors. For example, you call a container with multiple eye shadows a palette, not a scheme. You can create a palette from a scheme.
Gradient vs Ombre
So, please do not interchange these words. Yes, they both basically mean that a color changes gradually into another color (tone, tint, hue, shade), but there is a difference. Ombre is used more in reference to beauty (hair color, nail color). While ombre can be defined as color fading from light to dark, in current times, there are "ombre" hair colors that go from one color to another. Gradient is the proper term for computer graphics, which is what hexadecimal is involved in. So, if you see a tutorial for a "Photoshop ombre effect" they are actually just using the Photoshop gradient tool.
If you've decided to skip, this is where you need to tune back in.
Where to Find Hexadecimal Color Codes
Now, as stated before, there is no way to know all the color codes out there. There are many wonderful resources you can use to find them though. However, if you are not color name savvy, no worries! You can easily use a basic color - such as blue - and go through a blue color scheme to find a color you like. I didn't know a ton of fancy color names until I really started looking into hues, shades, tints, and tones. So, here are a few resource sites you can use to locate the perfect color, some palette ideas, and so on.
ColorHexa
Colllor
Color-Hex
These sites will provide the hexadecimal code, color names, gradients, schemes, palettes, shades, tints, tones, hues (of course), web safe colors (which I have to ask if it is even still relevant, lol), and one even has a color blindness simulator.
View full tutorial
What is a hexadecimal code?
Well, getting nerdy here, hex[a] basically means "six." So, it's basically a 6 number code in a sequence or order that represents a particular color. I'm not going to go into any other detail on that because we don't need to. You can always ask Dr. Google or Dr. Wiki for more information.
As you are learning CSS/HTML you'll find yourself pretty much memorizing many of these codes.
#000000 is Black
#ffffff is White
#ff0000 is Red
So, what about other colors, such as... charcoal? Or cerulean? Or even chartreuse? They exist as hexadecimal codes as well, but trying to remember all the color codes is impossible. You'll remember a few - your favorites and basic primary colors - but not the whole color wheel that exists.
A little trick...
There is a small and nifty trick that you can use with some hexadecimal codes. For codes that use the same letter or number for the entire code (such as #000000) you can shorten these to only three numbers (#000) and it will work just the same.
This trick will not work on codes that are repeating (such as #808080) or mixtures of letters and numbers (#007ba7). If you shorten these, they will not give you the color of their full code.
Now, here is where - if you so desire - to skip as the next few sections are more to help you select colors and other things. This is a quick and dirty color explanation.
Color Schemes and Color Palettes
Alright, we're getting back into terminology again and introducing color theory. If you've ever taken an art class, you should be familiar with color theory. Because I am lazy and if I really went into explaining color theory, I'd need to write a whole tutorial just on that; so here is a quote from Dr. Wiki, "In the visual arts, color theory or colour theory is a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also definitions (or categories) of colors based on the color wheel: primary color, secondary color and tertiary color."
(Don't even get me into RGB vs CYMK.)
We don't even need to get into the categories either. What I want to focus on from that quote is "practical guidance to color mixing and visual effects of a specific color combination." While we are not mixing colors, we do need to take into consideration the visual effects of color combinations. When people put the colors red and green (which by the way are complementary colors) you think of Christmas perhaps. And while colors are entirely subjective; you still need to choose wisely. (Trivia: Did you know there are forbidden color combinations regarding creating advertisements? Well, not forbidden, but definitely not encouraged.)
So, that's where color schemes can come into play to help you. Now, there are actually different types of schemes. (Got a headache yet?) But I'm not going to go into those either; you can read about them here. However, you can search for color schemes that you like and want to use
Now, as for what a color palette is (yes, it is different from a scheme). A palette is created when you select colors. For example, you call a container with multiple eye shadows a palette, not a scheme. You can create a palette from a scheme.
Gradient vs Ombre
So, please do not interchange these words. Yes, they both basically mean that a color changes gradually into another color (tone, tint, hue, shade), but there is a difference. Ombre is used more in reference to beauty (hair color, nail color). While ombre can be defined as color fading from light to dark, in current times, there are "ombre" hair colors that go from one color to another. Gradient is the proper term for computer graphics, which is what hexadecimal is involved in. So, if you see a tutorial for a "Photoshop ombre effect" they are actually just using the Photoshop gradient tool.
If you've decided to skip, this is where you need to tune back in.
Where to Find Hexadecimal Color Codes
Now, as stated before, there is no way to know all the color codes out there. There are many wonderful resources you can use to find them though. However, if you are not color name savvy, no worries! You can easily use a basic color - such as blue - and go through a blue color scheme to find a color you like. I didn't know a ton of fancy color names until I really started looking into hues, shades, tints, and tones. So, here are a few resource sites you can use to locate the perfect color, some palette ideas, and so on.
ColorHexa
Colllor
Color-Hex
These sites will provide the hexadecimal code, color names, gradients, schemes, palettes, shades, tints, tones, hues (of course), web safe colors (which I have to ask if it is even still relevant, lol), and one even has a color blindness simulator.
View full tutorial
