Colors
Colors
- Cascading Style Sheets provide many ways to apply colour for styling web elements.
The different color of an element are:
- Keyboard colors
- RGB Format
- RGBA Format
- Hexadecimal Notation
- HSL
- HSLA
Colors used in CSS:
Keyboard colors: CSS provides a a set of predefined colors that are easy to remember.
- red
- blue
- green
- black
- white
- yellow
- purple
- grey
Syntax:
p {
color: yellow;
background-color: blue;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS color property</title>
<style>
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>
QUIPOIN
</h1>
</body>
</html>
Output:
QUIPOIN
Hexadecimal Notation:
- Colors are represented by using hexadecimal values, which consist of a hash (#) followed by six characters (3 pairs of two) that represent the red, green, and blue (RGB) components of the color.
Example:
- #FF0000:Indicates red.
- #00FF00: Indicates green.
- #0000FF: Indicates blue.
RGB Functional Notation:
- Colors can be specified using the RGB() notation, which allows you to define the red, green, and blue values as integers ranging from 0 to 255.
Example:
- rgb(255, 0, 0) : Indicates red.
- rgb(0, 255, 0) :Indicates green.
- rgb(0, 0, 255) : Indicates blue.
Key Points:
- We can also use percentages for the RGB values, like RGB(100%, 0%, 0%) for red.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS color property</title>
<style>
h1 {
color: rgb(0, 153, 0);
text-align: center;
}
</style>
</head>
<body>
<h1>
Quipoin
</h1>
</body>
</html>
Output:
Quipoin
RGBA Format:
- It is similar to RGB() notation but includes an additional parameter for specifying the colour's opacity (alpha channel).
- Alpha is a number between 0 and 1.
- 0 indicates fully transparent and 1 indicates fully opaque.
Syntax:
h1 {
color:rgba(R, G, B, A);
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS RGBA color property</title>
<style>
h1 {
color: rgba(0, 153, 0, 0.5);
text-align: center;
}
</style>
</head>
<body>
<h1>
QUIPOIN
</h1>
</body>
</html>
Output:
Quipoin.com
HSL and HSLA Functional Notation:
- HSL represents for Hue, Saturation, and Lightness.
- HSLA includes an alpha channel for opacity. These notations provide a more intuitive way to describe colors.
Example:
- hsl(0, 50%, 50%) represents pure red.
- hsla(120, 100%, 50%, 0.5) represents semi-transparent green.
- CSS also supports color names, like transparent for a completely transparent color.