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
- Built-in color names
RGB format
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).
This property is not supported by all browsers, so its use is not
recommended.
Syntax
color: rgb(red, green, blue);
RGBA format
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.
Syntax
color: rgba(red, green, blue, alpha);
Hexadecimal notation
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.
In hexadecimal notation, black is represented as #000000 and white as
#FFFFFF. Other examples include #FF0000 for red, #00FF00 for green, #0000FF
for blue, and #FFFF00 for yellow, among others.
Syntax
color: #RRGGBB;
Short Hex Codes
The short form of hexadecimal notation condenses the color code by
repeating each digit to create the full six-digit hexadecimal value. For
example, #7B6 becomes #77BB66.
In short hex notation, black is #000 and white is #FFF. Other examples
include #F00 for red, #0F0 for green, #0FF for cyan, and #FF0 for yellow,
among others.
HSL
It is a shortened version of Hue, Saturation, and Lightness. Let’s look at
each of these elements individually.
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).
Syntax
color: hsl(hue, saturation, lightness);
HSLA
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).
Syntax
color: hsla(hue, saturation, lightness, alpha);
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.
The illustration of CSS colors, including the properties mentioned above, is
shown below.
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>
