HTML Colors & Backgrounds — Free HTML Tutorial

Learn HTML Colors & Backgrounds in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

TL;DR: Learn HTML Colors & Backgrounds in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated Sep 17, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

HTML Colors & Backgrounds in HTML

Colors can be: named (red, royalblue), hex (#3b82f6), RGB (rgb(59,130,246)), RGBA (adds opacity 0–1), or HSL.

Hex codes use 6 hex digits #RRGGBB. Short #RGB also works: #f00 = #ff0000.

RGBA fourth value controls transparency: rgba(0,0,0,0.5) = 50% transparent black.

linear-gradient() creates smooth transitions between colors for backgrounds.

HTML Colors & Backgrounds — Syntax

<p style="color: crimson;">Named color</p>
<p style="color: #3b82f6;">Hex color</p>
<p style="color: rgb(59,130,246);">RGB color</p>
<div style="background:rgba(59,130,246,0.3);">RGBA 30% opacity</div>
<div style="background:linear-gradient(135deg,#6366f1,#ec4899);">Gradient</div>

Learn HTML Colors & Backgrounds step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →