Colors

Definition

CSS allows you to apply colors to text, backgrounds, and borders using several different formats: Keywords, HEX, RGB/RGBA, and HSL/HSLA.

Explain Like I'm New

There's more than one way to say 'Red'. You can use the word `red`, the Hexadecimal code `#ff0000`, the RGB mix `rgb(255, 0, 0)`, or the Hue-Saturation-Lightness mix `hsl(0, 100%, 50%)`. The 'A' in RGBA and HSLA stands for 'Alpha' (transparency).

Real World Example

Creating a beautiful glassmorphism effect using `rgba(255, 255, 255, 0.5)` to make a white background 50% see-through.

Common Use Cases

•Theming
•Gradients
•Opacity and transparency

Interactive Example

Interview Questions

basic

What does the 4th value in `rgba(0, 0, 0, 0.5)` do?

intermediate

Why do designers prefer HSL over HEX codes?

Flash Cards

Question

What does the 4th value do?

Click to reveal answer

Answer

It controls the Alpha channel (Opacity). 1 is completely solid. 0 is completely invisible. 0.5 is 50% transparent.

Question

Why HSL?

Click to reveal answer

Answer

It is intuitive. If you have a blue button and you want to make it slightly darker when the user hovers over it, with HEX you have to guess random letters and numbers. With HSL, you just lower the 'Lightness' percentage from 50% to 40%.