Use colors in CSS with the help of these handy tools
Matt is working his way through HTML & CSS, by Jon Ducket (no affiliation). He learned HTML days back in the early days of the web (around 1999). He wants to give himself a refresher and then learn programming. Want to learn with him? Join our tribe!
Yes! A short chapter! Yesterday’s lesson was a bit brutal:
It was a bit of a mind-twister. I had to really really work to wrap my head around CSS Selectors. I understand now (I hope!). I have a cheat sheet bookmarked. It will take some practice to get it into my head.
After that brain–squeeze, it was nice to get back to my wheelhouse. I studied Graphic Design in college, so a chapter about color is an easy one. I could breeze past the easy stuff and really concentrate on the new CSS3 stuff.
For the rest of us, let me break down the four ways that you can define color in CSS. CSS3 added a fourth method, but you should use it with care.
1 RGB color. This is written in the format rgb(100,100,100). This is a color made up of a little red, a little green, and a little blue. Each value is separated by a comma. Each value is from 0 (nothing) to 100 (everything).
This is for screen-based colors, only. Those familiar with printing colors will think of CMYK. This is the four types of inks used to print color. C is “cyan” (another name for blue). M is “magenta” (another name for red). Y is “yellow” (another name for yellow). K is “how the heck should I know, you Google it” (another name for black). Kryptonian?
K is for Kryptonian. Superman is Kryptonian. Superman is black.
FYI, I’m totally cool with Superman being black. #blackLivesMatter #wakandaForever #blackPower #supermanWasBlack #imJustReachingForMyWalletOfficer
CMYK Tip: If some rando graphic designer gives you a CMYK color and you need to find out the RGB equivalent, just fire up PhotoShop, and open the color panel. It will let you define the CMYK color. Then, you can see both the RGB values as well as the HEX values (below).
2 Hex color. This is a hex value. If you’re a super nerd who likes to play very nerdy board games, you will understand what a “hex” is. For the rest of us, it is a RGB color that is translated into a 6-digit “number” and proceeded by a hash (#).
I say “number” because it’s actually a combination of letters and numbers. Frankly, I don’t understand it. I just use it. It looks something like #ee33ff.
3 Color names. There’s a bunch of color names that are pre-defined in HTML/CSS. These are rarely used, because designers can’t really remember what shade “Chartreuse” is. If you really must know the different names, here is a CSS Color Name Cheat Sheet. I use these when I want something to be a certain hue, but I don’t much care exactly what shade it is. I know that the names include the basics. When I just want something to be a plain, vanilla, hetero color, I pull out one of the handy colors:
- Purple (make it rain!)
- Black (#blackHexMatters)
- White (#ImAColorToo)
4 HSLA colors. Usually, I find that the style of code you use doesn’t much matter. I use mostly HEX colors. Occasionally, I sprinkle in a color name (see above). I use the other colors when someone gives me one and I’m too lazy to look up the HEX equivalent.
CSS3 went a step further. The introduced the concept of transparency and overlapping colors (Yellow and Blue make GREEN! YEEEAH!). Here is a different combination:
- Hue (Red, Green, & Yellow)
- Saturation (None to 100%)
- Lightness (None to 100%)
- A for “alpha” (Transparency of 0 to 1)
These look like RGB declarations. They look like HSLA(0,100%,100%,0.5). I wouldn’t even try to pick the right color. I would use a HSLA Color Generator to pick the right color. As for how they will interact with other colors on overlap, I would play with it.
That’s for professional graphic designers. That’s why they make the big bucks.
HSLA Tip: Only new browsers support HSLA. And older browser will say, “Yeah, I’m out.” For that reason, you should double-declare your CSS colors. And older browser will read the first CSS statement and happily execute your orders. Then, it will hit the second HSLA statement and say, “Yeah, I’m out. I’ll stick with the first one.” A new browser will hit the first color statement and say, “You got it, boss.” Then, it will hit the second statement and say, “You got it, boss.”
Color in CSS, like a boss
Matt is on a noble quest to grow into the next level of web developer. Let the battle begin! Sign up for the M.W. McCabe newsletter.