Lecture Notes Of Class 8: CSS Colors
Objective:
Explore color properties in CSS
and understand how to apply different color formats in web development.
Topics:
1. Hexadecimal
(Hex) Colors:
o
A hexadecimal color is a six-digit code that
represents the amount of red, green, and blue in a color.
o
Format: #RRGGBB
§ RR = Red
(00 to FF in hexadecimal)
§ GG =
Green (00 to FF in hexadecimal)
§ BB = Blue
(00 to FF in hexadecimal)
o
Example: #FF5733 (a shade of red-orange).
2. RGB (Red,
Green, Blue):
o
Defines a color using red, green, and blue
components, where each value is an integer between 0 and 255.
o
Format: rgb(red, green, blue)
o
Example: rgb(255, 87, 51) (a shade of red-orange).
3. RGBA
(Red, Green, Blue, Alpha):
o
Similar to RGB, but with an added alpha (opacity)
value to make the color transparent.
o
Format: rgba(red, green, blue, alpha)
§ alpha is
a value between 0 (completely transparent) and 1 (completely opaque).
o
Example: rgba(255, 87, 51, 0.5) (a semi-transparent
red-orange).
4. HSL (Hue,
Saturation, Lightness):
o
Represents colors in terms of their hue,
saturation, and lightness.
o
Format: hsl(hue, saturation, lightness)
§ hue is
the color type (0–360°; 0° is red, 120° is green, and 240° is blue).
§ saturation
is the intensity of the color (0% to 100%).
§ lightness
is the lightness of the color (0% to 100%).
o
Example: hsl(9, 100%, 60%) (a shade of red-orange).
Lab
Exercise: Create a Color Palette Using Different Color Formats
Task:
Create a webpage with a color palette that showcases colors in the four
different formats: Hex, RGB, RGBA, and HSL.
Steps:
1. Create a
New HTML File:
Create an HTML file (color-palette.html) and add the basic structure.
2. Add
Styles to Define Color Palette: Use inline CSS or a separate
style tag to define a palette of colors. Create a container to hold different
color swatches.
3. Define
Colors Using Different Formats:
o
Use Hex values to define one color.
o
Use RGB values to define another color.
o
Use RGBA for transparency.
o
Use HSL for a different shade.
4. Display
Colors in a Grid: Arrange the color swatches neatly in a grid,
using div elements with backgrounds set to the colors in each format.
Example
Code:
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Colors Palette</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.palette {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: 80%;
}
.color-box {
height: 150px;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
text-shadow: 2px 2px 5px rgba(0, 0,
0, 0.5);
}
</style>
</head>
<body>
<div class="palette">
<!-- Hex Color -->
<div class="color-box" style="background-color:
#FF5733;">#FF5733</div>
<!-- RGB Color -->
<div class="color-box" style="background-color:
rgb(255, 87, 51);">rgb(255, 87, 51)</div>
<!-- RGBA Color -->
<div class="color-box" style="background-color:
rgba(255, 87, 51, 0.5);">rgba(255, 87, 51, 0.5)</div>
<!-- HSL Color -->
<div class="color-box" style="background-color:
hsl(9, 100%, 60%);">hsl(9, 100%, 60%)</div>
</div>
</body>
</html>
Expected
Outcome:
- A
webpage will display a grid of four different color swatches, each
representing a color in a different format (Hex, RGB, RGBA, and HSL).
- The
colors should be visible as background colors, and their corresponding
values should be displayed as text on top of each color.
Discussion:
- Why
use different color formats?
- Hexadecimal
is widely used for simplicity and compactness.
- RGB
and RGBA are often more intuitive, as they represent direct color mixing.
- HSL
allows for easier manipulation of color characteristics like hue,
saturation, and lightness, making it ideal for creating color schemes.
These assignments help reinforce key CSS concepts related to color, gradients, accessibility, and interactivity.
No comments:
Post a Comment