CSS Colors 🎨

ok so colors can be a little weird in CSS and probably deserve some explanation.

Formats

TLDR; use hex colors when you can

so far, in all of my examples I have been using named colors. named colors are cool for writing some fast code, showing an example or using as a temporary placeholder but in reality they are a total mess.
- HTML & CSS come stock with 140 named colors that you can use. you can check them all out here (opens in a new tab).
- 140 is oddly specific isn't it? its also a pretty limited color pallette to work with. the stock HTML & CSS colors are from a mishmosh of sources.
- if you are curious exactly where they came from I took the liberty of asking ChatGPT:
  
  ▼where do the 140 stock html and css colors come from?
  - TLDR; they come from a few attempts at standardization going back to the 1980's
since the named colors are from a mishmosh of sources, they are incredibly inconsistent too. gray is actually darker than darkgray. tbh it would be a huge waste of time to learn/memorize the named colors.
instead of using the named colors, you can choose from 4 other options.

rbg colors are very common and super consistent.
most (all?) colors can be broken down into the percent of blending of red, blue and green and thats how you define rbg in your CSS.
- the way it works is you define three values, each one goes from 0 - 255 (more common) or 0% - 100% (less common) in order of red, blue, then green
- so, rgb(255 0 0) is red
- crank them all to 255, and you get white. set them all to 0, and you get black.
you don't really have to know those values or percents or how to make colors, there are tons of rbg color pickers. actually if you are on a Mac, your computer comes with an awesome one. if you didn't know, check out the Digital Color Meter app that comes pre-installed with Mac OSX. it will show you the rbg value of any color you hover over 🤯
use rbg in your CSS like this:

.aRedClass {
  color: rgb(255 0 0);
}

along with regular rbg colors, you can rock rbga colors
the "A" for Alpha stands for opacity
if you wanted that red class above to be at 50% opacity, you can just add a fourth value:

.aRedClass {
  color: rgb(255 0 0 / 0.5);
}

this is probably the most commonly used color format in web dev and my personal preference
hex and rbg colors are pretty much the same thing with different syntax.
you are still defining values of red, blue and green. each value is reprented by 2 characters, RRBBGG (6 values = hex 🤯)
in the Digital Color Meter app that I mentioned before, can also copy the hex code of any color you can point your cursor at.
hex is also the default color format in Figma (opens in a new tab) which is industry standard for UI design
heres that same red as above in hex format:

.aRedClass {
  color: #ff0000;
}

nobody calls it that, but you can actually add the alpha channel for opacity, just like in the rbga format
just add it right on the end. if a reg hex is RRBBGG, hex with opacity is RRBBGGAA

.aRedClass {
  color: #ff000050;
}

gonna be 100% honest, I have never used this.
the theory behind HSL and other modern color formats are cool and it's cool to know they exist, that you can use them and that it is possible to see them in the wild.
these are supposed to be more human ways of determining color, rather than defining by red, blue and green values.
First the hue is defined on a circular scale from 0deg to 360deg, then saturation and lightness are defined by percents.
they look like this:

.aRedClass {
  color: hsl(0deg 100% 50%);
}
 
/* with the alpha channel for opacity */
.aRedClass {
  color: hsl(0deg 100% 50% / 0.5);
}

the other formats CSS Supports are LCH (Lightness Chroma Hue), which is very similar to HSL, OKLAB, OKLCH and Display P3.

make your own named colors.
this is probably the most professional and cleanest way to use colors in CSS.
one of the cool things about CSS variables is that they are not set in stone, you can override them with media queries if you need to.
CSS variables are also cool because you define the color in one place and if you use it all over your project and need to make a change, you only change that one definition
define the variable like this:
- this is usually done in the :root selector, which makes the variable globally available, but you can define it within any selector.

:root {
  --main-color: #ff6347;
}

body {
  background-color: var(--main-color);
}