HTML Colors
HTML color is a way to specify colors in your web pages. You can use color names, RGB values, HEX codes, or HSL values to define colors in HTML. Colors can be applied to text, backgrounds, borders, and other elements on a webpage to enhance its visual appearance.
Color Names
HTML provides a set of predefined color names that you can use directly in your code.
Example:
<p style=”color: red;”>This text is red.</p>
Output:
RGB Values
RGB (Red, Green, Blue) values are another way to specify colors in HTML. Each color channel (red, green, and blue) is represented by an integer between 0 and 255.
Example:
<p style=”color: rgb(255, 0, 0);”>This text is red.</p>
Output:
HEX Codes
Hexadecimal (HEX) codes are a popular way to represent colors in HTML. They consist of a pound sign (#) followed by six characters, each representing the intensity of red, green, and blue respectively.
Example:
<p style=”color: #FF0000;”>This text is red.</p>
Output:
HSL Values
HSL (Hue, Saturation, Lightness) values offer another method to specify colors in HTML. Hue represents the color itself, saturation controls the intensity of the color, and lightness determines how light or dark the color appears.
Example:
<p style=”color: hsl(0, 100%, 50%);”>This text is red.</p>
Output:
Applying Color
You can apply colors to various elements in HTML using the color property for text color and the background-color property for background color.
Example:
Output:
Color Picker Tools
There are many online color picker tools available that can help you choose the perfect colors for your website. These tools allow you to visually select colors and provide the corresponding color codes for use in your HTML code.
Here are some popular online color picker tools:
- Adobe Color (https://color.adobe.com/)
- Coolors (https://coolors.co/)
- Paletton (https://paletton.com/)
- Color Hunt (https://colorhunt.co/)
- ColorHexa (https://www.colorhexa.com/)
These tools offer a range of features to assist you in selecting and generating color schemes for your website. You can explore their interfaces and functionalities to find the one that best suits your needs.
In summary
HTML provides several ways to specify colors, including color names, RGB values, HEX codes, and HSL values. By using these color specifications, you can customize the appearance of your web pages to create visually appealing designs.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Using Hex Codes
Objective: Apply color to text using a hex code.
Expected Output: A webpage with a paragraph of text displayed in a light blue color.
<!DOCTYPE html>
<html>
<head>
<title>Hex Codes</title>
</head>
<body>
<p style=”color: #ADD8E6;”>This text is displayed in light blue color.</p>
</body>
</html>
Output:
Scenario 2: Using RGB
Objective: Apply color to text using RGB values.
Expected Output: A webpage with a paragraph of text displayed in coral color.
<!DOCTYPE html>
<html>
<head>
<title>RGB Colors</title>
</head>
<body>
<p style=”color: rgb(255, 127, 80);”>This text is displayed in coral color.</p>
</body>
</html>
Output:
Scenario 3: Using HSL
Objective: Apply color to text using HSL values.
Expected Output: A webpage with a paragraph of text displayed in gold color.
<!DOCTYPE html>
<html>
<head>
<title>HSL Colors</title>
</head>
<body>
<p style=”color: hsl(51, 100%, 50%);”>This text is displayed in gold color.</p>
</body>
</html>
Output:
Scenario 4: Background Color Using Color Name
Objective: Apply a background color to an element using a color name.
Expected Output: A webpage with a div element having a light grey background color.
<!DOCTYPE html>
<html>
<head>
<title>Background Color Names</title>
</head>
<body>
<div style=”background-color: lightgrey;”>
<p>This div has a lightgrey background color.</p>
</div>
</body>
</html>
Output:
Scenario 5: Background Color Using Hex Code
Objective: Apply a background color to an element using a hex code.
Expected Output: A webpage with a div element having a light coral background color.
Output:
Scenario 6: Background Color Using RGB
Objective: Apply a background color to an element using RGB values.
Expected Output: A webpage with a div element having a pale green background color.
Output:
Scenario 7: Background Color Using HSL
Objective: Apply a background color to an element using HSL values.
Expected Output: A webpage with a div element having a turquoise background color.
Output:
Scenario 8: Inline and Internal Styles
Objective: Apply colors using both inline and internal styles.
Expected Output: A webpage with a heading displayed in red color using inline styles, and a paragraph displayed in blue color using internal styles.
Output:
Scenario 9: Color Contrast for Accessibility Using Hex Code
Objective: Ensure color contrast for better accessibility using a hex code.
Expected Output: A webpage with text displayed in a dark blue color against a light gray background, ensuring good color contrast.
Output:
Practice Scenario 10: Comprehensive Web Page Styling
Objective: Create a comprehensive web page that incorporates a variety of HTML and CSS techniques, including text formatting, color application using different methods, good contrast for accessibility, and the use of both internal and inline styles.
Expected Output: A web page with:
- A main heading and subheading with different colors.
- Three paragraphs, each demonstrating various formatting techniques.
- Different text colors applied using hex codes, RGB, and HSL values.
- Good color contrast for accessibility.
- Background colors applied to elements.
- Combination of inline and internal CSS styles.
<!DOCTYPE html>
<html>
<head>
<title>Advanced Web Page Styling</title>
<style>
body {
background-color: #f0f0f0; /* Light gray background for good contrast */
font-family: Arial, sans-serif;
}
h1 {
color: #ff6347; /* Tomato color using hex code */
}
h2 {
color: #4682b4; /* Steel blue color using hex code */
}
p {
font-size: 16px;
margin: 15px 0;
}
.paragraph-1 {
color: #2e8b57; /* Sea green color using hex code */
}
.paragraph-2 {
color: rgb(255, 127, 80); /* Coral color using RGB */
}
.paragraph-3 {
color: hsl(51, 100%, 50%); /* Gold color using HSL */
background-color: #fafad2; /* Light goldenrod yellow background */
}
.highlight {
background-color: yellow; /* Highlight text using color name */
}
</style>
</head>
<body>
<h1>Main Heading in Tomato Color</h1>
<h2>Subheading in Steel Blue</h2>
<p class=”paragraph-1″>This paragraph is styled using internal CSS with a sea green color. It demonstrates good contrast against the light gray background.</p>
<p class=”paragraph-2″>This paragraph is styled using internal CSS with a coral color applied using RGB values. It also has good contrast for readability.</p>
<p class=”paragraph-3″>This paragraph uses HSL values for the text color (gold) and has a light goldenrod yellow background for visual appeal. Additionally, this sentence includes <span class=”highlight”>highlighted text</span> for emphasis.</p>
<p style=”color: #8a2be2;”>This paragraph uses an inline style with a blue violet color applied using a hex code, adding variation to the text styling.</p>
</body>
</html>
Output:
