CSS Colors
- The color property in CSS is used to define the color of HTML elements. It is commonly applied to set either the background color or the text color of an element.
- In CSS, color values are used to specify colors. This property can also be applied to set the border color and other decorative effects.
- The color of an element can be defined in the following ways:
- RGB format
- RGBA format
- Hexadecimal notation
- HSL
- HSLA
Types of CSS Colors
CSS supports various color formats and names to define colors for elements on a webpage. Here's an overview:
1. Named Colors
CSS has Predefined color names in CSS (e.g., red, blue, lightblue).
Syntax:
color: blue;
background-color: lightgray;
2. Hexadecimal Colors
Hex values are a combination of 6 digits (0-9, A-F) representing red, green, and blue components.
Hexadecimal is a six-digit color code that starts with the # symbol, followed by six characters ranging from 0 to F. In this notation, the first two digits represent the red (RR) value, the next two represent the green (GG) value, and the last two represent the blue (BB) value.
* Full hex: #RRGGBB
* Short hex: #RGB
Syntax:
color: #ff5733; /* Vibrant orange */
color: #fff; /* White */
3. RGB Colors
The RGB format stands for 'Red, Green, and Blue' and is used to define the color of an HTML element by specifying the R, G, and B values, each ranging from 0 to 255.
In this format, color values are defined using the rgb() function. This function accepts three values, which can be either percentages or integers (ranging from 0 to 255).
Format: rgb(red, green, blue)
Syntax:
color: rgb(255, 87, 51); /* Same as #ff5733 */
4. RGBA Colors
The RGBA format is similar to RGB, but it includes an additional value, A (Alpha), which controls the element's transparency. The alpha value ranges from 0.0 to 1.0, where 0.0 is fully transparent and 1.0 is fully opaque.
Format: rgba(red, green, blue, alpha)
Syntax:
background-color: rgba(255, 87, 51, 0.5); /* Semi-transparent orange */
5. HSL Colors
It is a shortened version of Hue, Saturation, and Lightness. Let’s look at each of these elements individually.
* Hue: 0-360 degrees
* Saturation & Lightness: 0%-100%
- Hue: This is the position on the color wheel, ranging from 0 to 360 degrees. For example, 0 represents red, 120 represents green, and 240 represents blue.
- Saturation: This is expressed as a percentage. 100% means the color is fully saturated with no gray, 50% means the color has some gray but is still visible, and 0% means the color is completely gray and invisible.
- Lightness: This describes how light or dark the color is. 0% represents black (no light), 50% is a neutral shade (neither light nor dark), and 100% represents white (full lightness).
Format: color: hsl(hue, saturation, lightness);
Format: color: hsl(hue, saturation, lightness);
Syntax:
color: hsl(30, 100%, 50%); /* Orange */
6. HSLA Colors
It is similar to the HSL property, but includes an A (alpha) value that controls the element's transparency. The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).
Same as HSL with alpha transparency.
Format: hsla(hue, saturation, lightness, alpha)
Syntax:
background-color: hsla(30, 100%, 50%, 0.7); /* Semi-transparent orange */
7. CurrentColor Keyword
Uses the current text color for other properties.
Syntax:
border-color: currentColor;
8. Transparent
A special keyword for fully transparent.
Syntax:
background-color: transparent;
Summary Table of Formats
Type Example
Named Colors red
Hex Colors #ff0000
RGB rgb(255, 0, 0)
RGBA rgba(255, 0, 0, 0.5)
HSL hsl(0, 100%, 50%)
HSLA hsla(0, 100%, 50%, 0.5)
Transparent transparent
Built-in color
As the name suggests, built-in colors are predefined colors that can be used
by referring to their names, such as red, blue, green, etc.
Syntax:
color: color-name;
Let's look at a list of built-in colors with their decimal and hexadecimal
values.
Example:
<html>
<head>
<title>CSS Color
Properties</title>
<style>
h1 {
text-align:
center;
}
#rgb {
color:
rgb(255, 0, 0);
}
#rgba {
color:
rgba(255, 0, 0, 0.5);
}
#hex {
color:
#EE82EE;
}
#short {
color:
#E8E;
}
#hsl {
color:
hsl(0, 50%, 50%);
}
#hsla {
color:
hsla(0, 50%, 50%, 0.5);
}
#built {
color:
green;
}
</style>
</head>
<body>
<h1 id="rgb">Hello World. This is
RGB format.</h1>
<h1 id="rgba">Hello World. This is
RGBA format.</h1>
<h1 id="hex">Hello World. This is
Hexadecimal format.</h1>
<h1 id="short">Hello World. This is
Short-hexadecimal format.</h1>
<h1 id="hsl">Hello World. This is
HSL format.</h1>
<h1 id="hsla">Hello World. This is
HSLA format.</h1>
<h1 id="built">Hello World. This is
Built-in color format.</h1>
</body>
</html>
Output:
