MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome back! In the previous lesson, you learned how to paint HTML elements using 140 built-in color names and RGB light values.
Now, if you look at modern professional web designs—whether it is Instagram, YouTube, Flipkart, or Figma—you will almost never see developers typing color: Tomato;.
Instead, you will see professional codes like this:
#FF6B00 (MSK Vibrant Orange)#0A2540 (Deep Navy Blue)hsl(210, 100%, 50%) (Electric Blue)Why do software engineers and graphic designers love HEX and HSL?
Let's break them down step-by-step in easy English!
The word Hexadecimal sounds like complicated rocket science, but it is actually very simple:
In school maths, you use the Decimal (Base-10) system. You have 10 single-digit numbers: $$\text{0, 1, 2, 3, 4, 5, 6, 7, 8, 9}$$ Once you reach $9$, you run out of single digits, so you combine two digits to make $10$.
In computer science, Hexadecimal (Base-16) needs 16 single digits. Because we don't have numbers after 9, computers borrow the first six letters of the English alphabet:
| Hex Symbol | Meaning in Normal Maths |
|---|---|
0 to 9 | Numbers 0 to 9 |
A | 10 |
B | 11 |
C | 12 |
D | 13 |
E | 14 |
F | 15 (The Maximum single digit!) |
So in Hexadecimal, the numbers go: $$\text{0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F}$$
00 is the lowest possible two-digit value (equal to $0$).FF is the highest possible two-digit value (equal to $255$ in decimal)!#RRGGBBA HEX color code always begins with a hash symbol #, followed by 6 characters:
$$\text{\#RRGGBB}$$
RR (First 2 digits): Red intensity from 00 (off) to FF (maximum).GG (Middle 2 digits): Green intensity from 00 (off) to FF (maximum).BB (Last 2 digits): Blue intensity from 00 (off) to FF (maximum).| Color | HEX Code | Red | Green | Blue | Explanation |
|---|---|---|---|---|---|
| Pure Red | #FF0000 | FF (255) | 00 (0) | 00 (0) | Red at maximum brightness; green & blue off. |
| Pure Green | #00FF00 | 00 (0) | FF (255) | 00 (0) | Green at maximum brightness. |
| Pure Blue | #0000FF | 00 (0) | 00 (0) | FF (255) | Blue at maximum brightness. |
| Pitch Black | #000000 | 00 (0) | 00 (0) | 00 (0) | Zero light everywhere. |
| Pure White | #FFFFFF | FF (255) | FF (255) | FF (255) | All lights at 100% full power. |
| Bright Yellow | #FFFF00 | FF (255) | FF (255) | 00 (0) | Red + Green at full power. |
| MSK Orange | #FF6B00 | FF (255) | 6B (107) | 00 (0) | Signature energetic brand orange. |
| MSK Navy | #0A2540 | 0A (10) | 25 (37) | 40 (64) | Deep, premium institutional blue. |
Whenever the two digits in every pair are identical, you can take a shortcut and write just 3 digits!
#FF6B00 cannot be shortened because 6 and B are different.RGB and HEX are great for computers. But how do human beings think about colors?
When an art teacher asks you: "Can you make this blue color a bit lighter, or make the orange more rich and bright?", you don't calculate base-16 math. You think about brightness and richness!
That is exactly why HSL was invented!
$$\text{hsl(Hue, Saturation\%, Lightness\%)\!}$$
Let's understand each of the three parts:
Think of a circle or geometry protractor with 360 degrees. As you travel around the circle, you visit every color of the rainbow:
0° (or 360°): Red60°: Yellow120°: Green180°: Cyan (Aqua)240°: Blue300°: Magenta (Pink/Purple)Saturation is expressed as a percentage from 0% to 100%:
0%: Completely gray! Like an old black-and-white television or pencil sketch (zero color).50%: A gentle, muted, pastel shade.100%: 100% pure, intense, vibrant color!Lightness is also expressed as a percentage from 0% to 100%:
0%: Pitch Black (No light at all, like midnight).50%: Normal, True Color (The perfect balance).100%: Pure White (Blinding light, like looking into the sun).Imagine you created a button with this blue color:
When a user hovers their mouse over the button, you want it to become slightly darker:
And if you want a soft pastel background version:
Notice how easy that was? The color family (210) stayed the exact same; you only changed one single number!
Just like RGBA, HSL has an A (Alpha) version called HSLA:
You never have to calculate HEX or HSL codes by hand in your head! In Visual Studio Code:
red or #000000).Always make sure your text is easy to read:
#FFFFFF).#1E293B).Here is how the four main color formats look side-by-side for the same shades:
| Color | Color Name | HEX Code | RGB Code | HSL Code |
|---|---|---|---|---|
| Pure Red | red | #FF0000 or #F00 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Pure Green | lime | #00FF00 or #0F0 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Pure Blue | blue | #0000FF or #00F | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Pure White | white | #FFFFFF or #FFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Pitch Black | black | #000000 or #000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Tomato | tomato | #FF6347 | rgb(255, 99, 71) | hsl(9, 100%, 64%) |
| DodgerBlue | dodgerblue | #1E90FF | rgb(30, 144, 255) | hsl(210, 100%, 56%) |
# symbol in HEXA HEX code without a hash # will be completely ignored by the browser!
Hexadecimal only goes from 0 to 9 and A to F. Letters like G, H, Z do not exist in Hex!
% symbol in HSLIn hsl(), the Saturation and Lightness values must include the percent symbol (%).
0-9 and A-F), where A=10 and F=15.#RRGGBB (two digits each for Red, Green, and Blue).#FFFFFF becomes #FFF).Test your understanding with these multiple-choice questions:
#000000?hsl(120, 100%, 0%)), what color will you see?Open VS Code and create a file named student-id-card.html.
Design a modern, professional Student ID badge for your school using HEX and HSL colors:
#0A2540 and rounded corners.#F59E0B.#FFF.background-color: hsl(210, 100%, 50%) and white text.hsl(140, 70%, 40%).Congratulations! You have completed Chapter 5: Colors! You are now ready to tackle links, navigation, and building multi-page websites!
In the next lesson, we will continue your web development journey with Links & Hyperlinks (Links).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| HTML Colors & RGB | Links & Hyperlinks |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.