HTML Colors
The four ways to specify any colour on the web: names, HEX, RGB and HSL.
What you will learn
- Use colour names
- Read and write HEX, RGB and HSL colours
- Use transparency with RGBA
Four ways to name a colour
| Way | Example | Notes |
|---|---|---|
| Name | tomato, teal | 140+ predefined names |
| HEX | #4338ca | Most common; #RRGGBB |
| RGB | rgb(67, 56, 202) | Red, Green, Blue (0–255) |
| HSL | hsl(245, 58%, 51%) | Hue, Saturation, Lightness |
<p style="color: tomato;">Named colour: tomato</p>
<p style="color: #4338ca;">HEX colour: #4338ca</p>
<p style="color: rgb(6, 182, 212);">RGB colour</p>
<p style="color: hsl(160, 84%, 39%);">HSL colour</p>All four paragraphs set color the same way — only the value style differs. The first uses a plain English name (tomato), the second a HEX code (#4338ca), the third RGB numbers, the fourth HSL numbers. They are just four ways to spell a colour; the browser understands them all.
Note: Output: Four lines of text, each one displayed in its own colour: a tomato-red, a deep indigo, a cyan, and a green.
HEX, decoded
A HEX colour like #4338ca is just #RedGreenBlue in base-16. #ff0000 is pure red, #00ff00 is pure green, #0000ff is pure blue, #000000 is black and #ffffff is white.
Transparency with RGBA
Add a fourth value (0 to 1) for alpha (opacity). rgba(0,0,0,0.5) is half-transparent black.
<div style="background-color: #4338ca; padding: 20px;">
<p style="background-color: rgba(255, 255, 255, 0.85); padding: 10px;">
Slightly see-through white box on a purple background.
</p>
</div>The outer <div> gets a solid purple background. The inner paragraph uses rgba(255, 255, 255, 0.85) — white, but the fourth number 0.85 makes it 85% opaque, so a hint of the purple shows through. Change that last number toward 0 and the white box becomes more see-through.
Note: Output: A purple box with a near-white inner box on top; because the inner box is slightly transparent, the purple faintly tints it.
Tip: Designers usually use HEX (like #4338ca). You can pick any colour and copy its HEX code from Google (search “color picker”) or your design tool.
Q. What colour is #ffffff?
✍️ Practice
- Write the same colour (your choice) in HEX, RGB and a name if it has one.
- Make a coloured box with a half-transparent text box inside it using RGBA.
🏠 Homework
- Pick a 3-colour palette for CodingClave and write down the HEX code of each.