Colors (Hex, RGB, HSL)
What are CSS Color Spaces?
Imagine a painter's mixing palette. To get the perfect shade of orange, you can pick a pre-labeled paint tube (Color Keywords), mix precise drops of Red, Green, and Blue paint (RGB), or adjust the base pigment, saturation level, and brightness (HSL).In CSS, we write colors in several formats:
red, blue, darkslateorange. (Simple, but limited to 147 names).#. E.g., #FF5733. The letters represent Red, Green, and Blue intensity from 00 (off) to FF (maximum).0 to 255. E.g., rgb(255, 87, 51). Adding an "A" (Alpha) sets transparency from 0 (clear) to 1 (solid). E.g., rgba(255, 87, 51, 0.5).hsl(11, 100%, 60%).Why does it matter?
Colors establish site branding, text readability, and visual hierarchy. Hex codes are standard for color schemes, but HSL is popular because it is human-readable: you can easily make a color darker by changing the Lightness number, or fade it by dropping the Saturation percentage.Syntax Breakdown
color: #ff3300; — HEX format.color: rgb(255, 51, 0); — RGB format.color: hsl(12, 100%, 50%); — HSL format.color: rgba(255, 51, 0, 0.5); — Transparent color (50% opacity).Common Mistakes
color: ff3300; without the hash # will be ignored by the browser.% (e.g., write 50%, not 50).Quick Reference
HEX (#RRGGBB) — Hexadecimal code.RGB (R, G, B) — Red, Green, Blue channels.HSL (H, S%, L%) — Hue, Saturation, Lightness.Alpha — Transparency controller.Your Task
Set the `color` property of the `.colored-text` class to `rgb(255, 100, 0)`.
index.html
Type code above to start the lesson.
Live Preview