CSS Colors

11.22.23

Most people, even outside of web dev, usually have a high level understanding of what CSS is. It’s the code that makes HTML look cool. I have heard the analogy that if a web site was a house, that the HTML would be the wooden frames, JavaScript would be the plumbing/electric and CSS would be the paint. The truth is that CSS is more like the foreman. CSS describes how elements are rendered on the screen.

CSS is more than just colors. CSS is also responsible for the layout, which includes making pages responsive (looking good on all screen sizes). CSS can also handle animations and even interactivity. CSS is way more complex than most people give it credit for, especially when you really deep dive into all of the pseudo selector classes. You can do a ton with just HTML & CSS and make things look awesome.
But CSS is also the paint. CSS is definitely responsible for colors and to be honest, they can be a little weird and deserve some explanation. Sticking to just the colors, I want to dig into the main color formats that you have available in CSS.

The first and most obvious one being the Named Colors. HTML and CSS come stock with 140 colors that you can use. 140 colors feels oddly specific and also kind of limiting, doesn’t it? There are some pretty weird ones on the list like IndianRed, AliceBlue, LightGoldenrodYellow, OldLace, Peru… the list goes on. The thing is, aside from having slightly racist and kind of random names, the colors themselves are actually kind of a mess. The standard 140 colors that we have today come from a mishmash of sources going back to the Unix X11 X Window System, which celebrates its 40th birthday next year, to HTML 4 spec which is now 24 years old. How old the colors are really doesn’t matter, what matters is that despite a few attempts at standardization, the colors are still super inconsistent. The most common example is that Gray is darker than DarkGray.

I’m not hating on the named colors. Nobody is mad about background-color: black;. Named colors are awesome for writing some fast code, showing an example or using as a placeholder.

Not limiting yourself to the 140 named colors, you can use RGB (Red, Green, Blue) colors. Over 16 million colors can be represented by RBG. You can’t represent the entire spectrum of color perceived by the human eye but you can represent the full spectrum that modern screens can display. RGB values are actually based on the physics of light. In addition to the slightly expanded color palette, RGB colors are super consistent because they are represented by numeric values.

The way RGB works is by determining how much of each color is mixed in. The colors, called channels, can be given values from 0 to 255. Put all values at 0, you have black. Put all values at 255 and you get white. Crank just the first one to 255 and leave the rest at zero, rgb(255 0 0), and you get red. With CSS you can actually use percents instead of the 0 to 255 system, but this is a little less common.

Along with the RGB color channels, CSS also allows for adding the alpha channel. Sometimes called RGBA, the alpha channel is used to indicate different levels of opacity. The alpha channel ranges from 0, fully transparent, to 1 which is fully opaque. Use it in CSS like this: rgb(255 0 0 / 0.5). That makes a 50% transparent red.

The next color format I want to get into is Hexadecimal. Hex is probably the most commonly used color format in web dev and my personal preference. Hex syntax is the easiest to copy and paste and it is the most concise. Hex is also the default color format in some UI design tools like Figma. Hexadecimal is essentially the same as RGB with different syntax. So you get the same 16 million plus color palette.

With RGB you just have the 3 values, in the Hex format you define your colors by RRGGBB (6 values = hex). The values go from 0-9 and then A-F. Hex colors are also always defined with a hash (#) in the beginning. So to get red, you crank the first two values to F, #FF0000.

Another cool thing about the Hex format is that you can go Octodecimal. Jk I don’t think anybody calls it that, but you can add an alpha channel value right onto your Hex color to play with opacity. No special syntax is required for the alpha channel on Hex colors, just add it at the end like this, #FFFF0080.

RBG and Hex have essentially global browser support, even with alpha channels. CSS actually supports a ton of other color formats too. The next being HSL (Hue, Saturation, and Lightness). The theory behind this color format is that it is supposed to be a more human way of determining colors. The syntax for HSL looks a lot like RGB. The same red that we have been using as an example, with the alpha channel, looks like this in HSL: hsl(0deg 100% 50% / 0.5). First the hue is defined on a circular scale from 0deg to 360deg, then saturation and lightness are defined by percents.
You can keep going too, CSS supports five more formats including LCH (Lightness Chroma Hue), which is very similar to HSL, OKLAB, OKLCH and Display P3. These are all more modern and they also attempt to define colors in more human and intuitive ways. Honestly though, I have never used these and seeing them in the wild is kind of rare but it is cool to know they exist.

As I mentioned earlier, most graphic and UI design tools use either RGB or Hex colors. Most color pickers do too. Just Google “color picker” and you can see Hex, RGB, CMYK, and HSL in action. If you are on a Mac, you actually have a pretty awesome app pre-installed on your computer called Digital Color Meter that will show you RGB and Hex color values for anything you hover over with your mouse. You can even copy and paste right from there.

To close this out, I want to mention that if you are now sad at the suggestion that you shouldn’t use the stock named colors, you can always define your own named colors using Hex or RGB in the scope of your project using CSS variables! Technically this is called CSS Custom Properties but is usually referred to as CSS variables. More good news, you don’t even need a fancy CSS framework like Sass or Tailwind to do this.

Thanks for taking this deep dive into CSS colors with me. CSS is awesome and I love nerding out about it.