Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
6.1 HTML Colors
1. Introduction to HTML Colors
HTML colors are used to style web pages, affecting text, backgrounds, borders, and other elements.
Colors can be defined in different ways:
1. By name (e.g., red, blue, green)
2. Hexadecimal (Hex) codes (e.g., #FF5733)
3. RGB values (e.g., rgb (255, 87, 51))
4. HSL values (e.g., hsl (9, 100%, 60%))
5. RGBA and HSLA values (for transparency)
HSL stands for Hue, Saturation, and Lightness, and it is a color representation model used
in graphics, digital imaging, and design.
Components of HSL:
1. Hue (H):
o Represents the type of color (e.g., red, blue, green, etc.).
o Measured in degrees (0°–360°) on the color wheel:
0° = Red
120° = Green
240° = Blue
2. Saturation (S):
o Represents the intensity or purity of the color.
o Measured as a percentage (0%–100%):
0% = Gray (completely desaturated)
100% = Fully saturated (pure color)
3. Lightness (L):
Page 1 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
o Represents the brightness of the color.
o Measured as a percentage (0%–100%):
0% = Black (completely dark)
100% = White (completely bright)
Example of HSL Values:
Pure Red: hsl(0, 100%, 50%)
Pure Green: hsl(120, 100%, 50%)
Pure Blue: hsl(240, 100%, 50%)
Gray: hsl(0, 0%, 50%)
Why Use HSL Instead of RGB?
HSL is more intuitive for human perception because it separates color (hue) from
intensity (lightness).
Easier for designers to adjust colors systematically.
Unlike RGB, which represents colors in additive mixing (Red, Green, Blue), HSL
allows for smoother shading and tint adjustments.
RGBA and HSLA are two different ways to define colors in digital graphics, primarily used
in web development (CSS) and computer graphics.
1. RGBA (Red, Green, Blue, Alpha)
RGBA is an extension of the RGB color model that includes an Alpha channel for
transparency.
Syntax: rgba(red, green, blue, alpha)
Each color component (red, green, blue) ranges from 0 to 255.
Alpha (opacity) ranges from 0 (fully transparent) to 1 (fully opaque).
Example:
color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
Page 2 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
2. HSLA (Hue, Saturation, Lightness, Alpha)
HSLA is an extension of the HSL model that includes an Alpha channel for transparency.
Syntax: hsla(hue, saturation, lightness, alpha)
Hue (H): Measured in degrees (0–360°) on the color wheel.
o 0° = Red, 120° = Green, 240° = Blue.
Saturation (S): Defines intensity (0% = grayscale, 100% = full color).
Lightness (L): Defines brightness (0% = black, 100% = white).
Alpha (opacity): Ranges from 0 (fully transparent) to 1 (fully opaque).
Example:
color: hsla(240, 100%, 50%, 0.7); /* Semi-transparent blue */
2. Defining Colors in HTML
HTML colors are applied using the style attribute or in CSS.
Example using inline CSS:
Page 3 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
<p style="color: red;">This is red text. </p>
Example using internal CSS:
<style>
p{
color: #FF5733;
}
</style>
3. Color Formats in Detail
A. Named Colors
HTML supports 140 standard color names, such as:
Red
Blue
Green
Yellow
Cyan
Magenta
Black
White
Example:
<p style="color: blue;">This text is blue. </p>
B. Hexadecimal Colors
Hex codes define colors using a #RRGGBB format, where:
RR is red (00-FF)
GG is green (00-FF)
Page 4 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
BB is blue (00-FF)
Example:
<p style="color: #008000;">This text is green. </p>
Shorter versions (#RGB) are also valid (e.g., #F00 for red).
C. RGB Colors
RGB stands for Red, Green, Blue, with values from 0 to 255.
Example:
<p style="color: rgb(255, 0, 0);">This text is red.</p>
Shades of gray have equal red, green, and blue values (e.g., rgb (128, 128, 128) for gray).
D. RGBA Colors (Adding Transparency)
RGBA is like RGB but adds an alpha channel (A) for transparency (0 = fully transparent, 1 =
fully opaque).
Example:
<p style="color: rgba(255, 0, 0, 0.5);">This text is semi-transparent red.</p>
E. HSL Colors (Hue, Saturation, Lightness)
HSL stands for:
Hue (H): 0-360 degrees (0 = red, 120 = green, 240 = blue)
Saturation (S): 0% (gray) to 100% (full color)
Lightness (L): 0% (black) to 100% (white)
Example:
<p style="color: hsl(240, 100%, 50%);">This text is blue.</p>
Page 5 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
F. HSLA Colors (Adding Transparency to HSL)
HSLA is similar to HSL but adds an alpha channel (A) for transparency.
Example:
<p style="color: hsla(120, 100%, 50%, 0.5);">This text is semi-transparent green.</p>
4. Background Colors
You can apply colors to the background using the background-color property.
Example:
<p style="background-color: yellow;">This text has a yellow background. </p>
5. Border Colors
You can set border colors using the border property.
Example:
<p style="border: 2px solid red;">This text has a red border. </p>
6. Text and Background Color Combination
For better readability, always use contrasting colors for text and background.
Example of good contrast:
<p style="color: white; background-color: black;">High contrast text. </p>
Example of bad contrast:
<p style="color: yellow; background-color: white;">Hard to read text. </p>
8. Conclusion
Page 6 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
HTML supports multiple ways to define colors.
Use Hex, RGB, HSL, RGBA, and HSLA for flexibility.
Ensure good contrast for accessibility.
Use CSS variables for consistency in large projects.
Practice Task:
Try changing text, background, and border colors in an HTML file. Experiment with different
formats and transparency levels.
6.2 Importance of HTML Colors
HTML colors play a vital role in web design and user experience. They help in branding, improving
readability, and making websites more visually appealing. Here are some key reasons why HTML
colors are important:
1. Enhancing Visual Appeal
Colors make a website more attractive and engaging.
A well-chosen color scheme can create a modern, professional, or playful look,
depending on the purpose of the site.
Example:
A corporate website may use blue and white for a professional look, while a children's website may
use bright and vibrant colors.
2. Improving Readability and Accessibility
Proper color contrast between text and background improves readability.
Websites must follow accessibility guidelines (WCAG) to ensure people with visual
impairments can read content easily.
Example:
Good contrast: White text on a black background.
Bad contrast: Yellow text on a white background.
Page 7 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
3. Branding and Identity
Companies use specific colors to create a strong brand identity.
Colors evoke emotions and help users associate the website with a brand.
Example:
Facebook uses blue to represent trust and reliability.
Coca-Cola uses red to evoke excitement and energy.
4. Highlighting Important Information
Colors help in emphasizing important content, such as warnings, calls to action, and
buttons.
Example:
Red for errors or warnings (e.g., "Invalid password!")
Green for success messages (e.g., "Payment successful!")
Orange for caution alerts (e.g., "Limited stock available!")
5. Better User Experience (UX) and Navigation
Colors can be used to guide users through a website.
Different colors for buttons, menus, and links make navigation easier.
Example:
Blue links indicate clickable items.
Hover effects change color to indicate interactivity.
6. Creating Emotional and Psychological Effects
Colors influence emotions and user behavior. Some common psychological effects include:
Red – Passion, urgency, excitement (used in sales and discounts)
Page 8 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
Blue – Trust, stability, professionalism (used by banks and businesses)
Green – Nature, health, growth (used in organic and eco-friendly websites)
Yellow – Happiness, positivity, energy (used in cheerful designs)
Black – Luxury, elegance, power (used in high-end brands)
7. Responsive and Adaptive Design
Colors can be adjusted based on dark mode or light mode preferences.
Websites can use dynamic color changes for better adaptability.
Example:
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
This code switches to dark mode if the user has enabled it in their system settings.
8. Aesthetic Consistency Across Devices
Web colors ensure a consistent look across different screens and browsers.
Using web-safe colors prevents distortions on older devices.
9. SEO and Engagement
A visually appealing website keeps users engaged longer, reducing bounce rates and
improving SEO rankings.
Well-chosen button colors improve click-through rates (CTR) in advertisements and
calls to action.
Example:
A red "Buy Now" button may get more clicks than a gray "Buy Now" button because red creates
urgency.
Page 9 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
10. Customization and Personalization
Modern websites allow users to customize themes (e.g., light mode vs. dark mode).
Personalized color schemes can improve user satisfaction.
Example:
Google allows users to change Gmail's theme colors to their preference.
6.2 HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an image or any other HTML element!
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to [Link]:
<a href="[Link] [Link]!</a>
By default, links will appear as follows in all browsers:
Page 10 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you
must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Example
Use target="_blank" to open the linked document in a new browser window or tab:
<a href="[Link] target="_blank">Visit W3Schools! </a>
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without
the "[Link] part):
Example
<h2>Absolute URLs</h2>
<p><a href="[Link]
Page 11 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
<p><a href="[Link]
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/[Link]">CSS Tutorial</a></p>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email program (to let
them send a new email):
Example
<a href="[Link] email</a>
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
Example
<button onclick="[Link]='[Link]'">HTML Tutorial</button>
Link Titles
Page 12 of 13
Lecture 06 Kazi Mowdud Ahmed
Assistant Professor
Course: ICT-2203: Web Technology Dept. of ICT, IU
The title attribute specifies extra information about an element. The information is most often
shown as a tooltip text when the mouse moves over the element.
Example
<a href="[Link] title="Go to W3Schools HTML section">Visit our
HTML Tutorial</a>
More on Absolute URLs and Relative URLs
Example
Use a full URL to link to a web page:
<a href="[Link] tutorial</a>
Example
Link to a page located in the html folder on the current web site:
<a href="/html/[Link]">HTML tutorial</a>
Example
Link to a page located in the same folder as the current page:
<a href="[Link]">HTML tutorial</a>
Chapter Summary
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that opens the user's
email program
Page 13 of 13