Lesson 3 of 15

Colors

CSS Color Formats

CSS supports multiple color formats:

Named colors — human-readable:

color: tomato;
background: lightblue;

Hex#RRGGBB (red, green, blue in hex):

color: #e11d48;       /* red */
color: #3b82f6;       /* blue */
color: #fff;          /* white shorthand */

RGB — values 0–255:

color: rgb(34, 197, 94);
background: rgba(0, 0, 0, 0.5);  /* with alpha */

HSL — hue (0–360°), saturation (%), lightness (%):

color: hsl(271, 81%, 56%);
background: hsl(220, 100%, 97%);

HSL is great for creating color palettes — keep the hue, vary the lightness.

Your Task

Style 4 paragraphs using named, hex, RGB, and HSL color formats.

CSS preview loading...
Loading...
Click "Run" to execute your code.