CSS Colors - CSS Tutorial

CSS accepts colors in several formats — pick whichever is clearest for the situation.

CSS

.a { color: red; }                  /* named color (148 available) */
.b { color: #ff0000; }              /* hex */
.c { color: #f00; }                 /* short hex */
.d { color: rgb(255, 0, 0); }       /* red, green, blue: 0-255 */
.e { color: rgba(255, 0, 0, 0.5); } /* rgb + alpha (opacity) */
.f { color: hsl(0, 100%, 50%); }    /* hue, saturation, lightness */
.g { color: currentColor; }         /* inherits the element's own color */

rgba()/hsl() with an alpha channel are the usual way to get semi-transparent colors, e.g. a subtle overlay:

CSS

.overlay {
  background: rgba(0, 0, 0, 0.4);
}

HSL is often easier to reason about than hex when you want variations of the same color — keep hue and saturation fixed and just change lightness:

CSS

.light  { background: hsl(243, 75%, 90%); }
.base   { background: hsl(243, 75%, 59%); }
.dark   { background: hsl(243, 75%, 35%); }

Try changing the hue (the first HSL number, 0-360) to get a completely different color family.

Keep learning