Let’s begin with Lecture 14 of the HTML5 & CSS3 series. Working with Colors in CSS – Hex, RGB, HSL & Named Colors. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand how to use color values in CSS
- Know the difference between hex, RGB, HSL, and named colors
- Be able to pick and apply beautiful colors to text, backgrounds, and borders
- Style your webpage with a colorful theme!
🌈 What Are Color Values in CSS?
Colors make your website fun and easy on the eyes. In CSS, there are several ways to define colors.
Think of it like this:
If CSS is your digital paintbox, then color values are the different types of paints — markers, watercolors, crayons — all used to create amazing designs!
🔤 Types of Color Values
| Type | Format | Example |
|---|---|---|
| Named Colors | Simple color names | red,blue,green |
| Hexadecimal (Hex) | 6-digit code starting with# | #ff0000,#0000ff |
| RGB | Red, Green, Blue values (0–255) | rgb(255, 0, 0) |
| HSL | Hue, Saturation, Lightness | hsl(0, 100%, 50%) |
🎨 Named Colors
These are simple and easy to remember.
Common Examples:
color: red;
background-color: blue;
border-color: green;There are over 140 named colors in CSS!
🖌️ Hexadecimal (Hex) Colors
Hex codes represent colors using a combination of 6 characters (0–9 and A–F), usually in pairs for red, green, and blue.
Examples:
color: #ff0000; /* red */
color: #0000ff; /* blue */
color: #ffff00; /* yellow */You can also write short hex codes if each pair repeats:
#f00=#ff0000(red)#0f0=#00ff00(green)
🎨 RGB Colors
RGB stands for Red, Green, Blue. Each value ranges from 0 to 255.
Examples:
color: rgb(255, 0, 0); /* red */
color: rgb(0, 0, 255); /* blue */
color: rgb(255, 255, 0); /* yellow */You can also add opacity using rgba():
color: rgba(255, 0, 0, 0.5); /* semi-transparent red */🌟 HSL Colors
HSL stands for Hue, Saturation, Lightness.
- Hue : 0–360 (color wheel)
- Saturation : 0% (grayscale) to 100% (full color)
- Lightness : 0% (black) to 100% (white)
Examples:
color: hsl(0, 100%, 50%); /* red */
color: hsl(120, 100%, 50%); /* green */
color: hsl(240, 100%, 50%); /* blue */You can also add opacity with hsla():
color: hsla(0, 100%, 50%, 0.5); /* semi-transparent red */💻 Try This: Make a Colorful Homepage
Let’s update your homepage (index.html) to look vibrant and colorful using different color formats.
Step 1: Open index.html
Make sure it looks something like this:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<style>
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: navy;
}
h2 {
color: darkgreen;
}
p {
color: #333;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Hello! In this article, I'm going to share some fun facts about animals.</p>
<h2>Cats</h2>
<p>Cats are amazing pets...</p>
<h2>Dogs</h2>
<p>Dogs are loyal friends...</p>
<h2>Birds</h2>
<p>Birds can fly and sing beautiful songs...</p>
</body>
</html>Step 2: Update Your CSS Styles
Replace the <style> block with this colorful version:
<style>
body {
background-color: hsl(210, 30%, 95%);
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: hsl(350, 100%, 40%);
border-bottom: 2px solid #007BFF;
}
h2 {
color: rgb(255, 87, 34);
background-color: rgba(255, 255, 0, 0.3);
padding: 5px;
}
p {
color: #2e2e2e;
font-size: 16px;
}
.highlight {
background-color: hsla(60, 100%, 75%, 0.5);
padding: 5px;
}
</style>Step 3: Add a Highlighted Paragraph
Update one of your paragraphs like this:
<p class="highlight">Birds can fly and sing beautiful songs. Some birds even talk!</p>Step 4: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve made your page come alive with a variety of color styles!
🧪 Try It Yourself!
- Change the background color of the page using a named color like
lightblue. - Give one heading a gradient effect by changing its color gradually (you’ll learn more about gradients later).
- Create a new paragraph with a custom background using RGBa.
- Use HSL to style a link so it changes color when hovered.
🚀 Next Lecture Preview:
In Lecture 15, we’ll learn how to work with fonts and text styling — including font families, sizes, bold, italic, and more — so your text doesn’t just say something, but says it beautifully!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
HTML5 and CSS3 Compleate Series
