Scribd
Upload
2 views

CSS Colors

Uploaded by

Rakesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSS Colors

Uploaded by

Rakesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS Colors

CSS Colors are an essential part of web design, providing the ability to bring your
HTML elements to life. This feature allows developers to set the color of various
HTML elements, including font color, background color, and more.
Color Formats in CSS (Color Values)
Color Format Description
Color Name These are a set of predefined colors which are used by their
names. For example: red, blue, green etc.
RGB Format The RGB (Red, Green, Blue) format is used to define the
color of an HTML element by specifying the R, G, and B
values range between 0 to 255.
RGBA Format The RGBA format is similar to the RGB, but it includes an
Alpha component that specifies the transparency of
elements.
Hexadecimal The hexadecimal notation begins with a # symbol followed
Notation by 6 characters each ranging from 0 to F.
HSL HSL stands for Hue, Saturation, and Lightness respectively.
This format uses the cylindrical coordinate system.
HSLA The HSLA color property is similar to the HSL property, but
it includes an Alpha component that specifies the
transparency of elements.
By understanding and utilizing these different methods, you can create vibrant and
dynamic web pages that captivate your audience.
1. Color Name
These are a set of predefined colors which are used by its name. For example: red,
blue, green, etc.
Syntax:
h1 {
color: color-name;
}
Example: In this example, we will use the color property with the specified color
name to set the text color.
<!DOCTYPE html>
<html>

<head>
<title>CSS Color_name Color</title>

<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>Use of Color name in CSS</h1>
</body>

</html>

2. RGB Color Format


The RGB (Red, Green, Blue) format is used to define the color of an HTML element
by specifying the R, G, B values range between 0 to 255. For example: RGB value
of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0, 255) etc.
Syntax:
h1 {
color: rgb(R, G, B);
}
Example: In this example, we will use the color property with the specified color
in RGB format to set the text color.
<!DOCTYPE html>
<html>

<head>
<title>CSS RGB Color</title>

<style>
h1 {
color: rgb(0, 153, 0);
text-align: center;
}
</style>
</head>

<body>
<h1> CSS RGB Color </h1>
</body>

</html>

RGBA Color Format


The RGBA format is similar to the RGB, but the difference is RGBA contains A
(Alpha) which specifies the transparency of elements. The value of alpha lies
between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not
transparent.
Syntax:
h1 {
color: rgba(R, G, B, A);
}
Example: In this example, we will use the color property with the specified color
in RGBA format to set the text color.
<!DOCTYPE html>
<html>

<head>
<title>CSS RGBA Color</title>

<style>
h1 {
color: rgba(0, 153, 0, 0.5);
text-align: center;
}
</style>
</head>

<body>
<h1> CSS RGBA Color </h1>
</body>
</html>

Hexadecimal Color Format


The hexadecimal color forat begins with # symbol followed by 6 characters each
ranging from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF
etc.
Syntax:
h1 {
color: #(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}
Example: In this example, we will use the color property with the specified color
in Hex color format to set the text color.
<!DOCTYPE html>
<html>

<head>
<title>CSS hex Color</title>

<style>
h1 {
color: #009900;
text-align: center;
}
</style>
</head>

<body>
<h1> CSS hex Color </h1>
</body>

</html>

HSL Color Fomat


HSL stands for Hue, Saturation, and Lightness respectively. This format uses the
cylindrical coordinate system.
• Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360
where 0 represents red, 120 represents green and 240 represents blue
color.
• Saturation: It takes a percentage value, where 100% represents
completely saturated, while 0% represents completely unsaturated (gray).
• Lightness: It takes percentage value, where 100% represents white, while
0% represents black.
Syntax:
h1 {
color: hsl(H, S, L);
}
Example: In this example, we will use the color property with the specified color
in HSL color format to set the text color.
<!DOCTYPE html>
<html>

<head>
<title>CSS hsl Color</title>

<style>
h1 {
color: hsl(120, 100%, 30%);
text-align: center;
}
</style>
</head>

<body>
<h1> CSS hsl Color </h1>
</body>

</html>

HSLA Color Format


The HSLA color is similar to HSL color, but the difference is HSLA contains A
(Alpha) which specifies the transparency of elements. The value of alpha lies
between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not
transparent.

Syntax:
h1 {
color: hsla(H, S, L, A);
}
Example: In this example, we will use the color property with the specified color
in HSLA color format to set the text color.
<!DOCTYPE html>
<html>

<head>
<title>CSS HSLA Color</title>
<style>
h1 {
color: hsla(120, 100%, 50%, 0.50);
text-align: center;
}
</style>
</head>

<body>
<h1> CSS HSLA Color </h1>
</body>

</html>

Tips
Colors in CSS can be specified using:
• Color names (e.g., red, blue)
• Hexadecimal values (e.g., #ff0000, #00ff00)
• RGB values (e.g., rgb(255, 0, 0), rgb(0, 255, 0))
• RGBA values for transparency (e.g., rgba(255, 0, 0, 0.5))
• HSL values (e.g., hsl(0, 100%, 50%))
• HSLA values for transparency (e.g., hsla(0, 100%, 50%, 0.5))

What are named colors in CSS?


Named colors are predefined color names that can be used directly in
CSS, such as red, blue, green, black, white, and many others.

What is a hexadecimal color code?


A hexadecimal color code is a six-digit code representing a color, starting
with #, followed by three pairs of hex digits for red, green, and blue (e.g.,
#ff0000 for red).

What is the RGB color model?


The RGB color model defines colors using Red, Green, and Blue
components, each ranging from 0 to 255. For example, rgb(255, 0, 0)
represents red.

What is the RGBA color model?


The RGBA color model extends RGB by adding an Alpha channel for
opacity, with values from 0 (fully transparent) to 1 (fully opaque). For
example, rgba(255, 0, 0, 0.5) represents semi-transparent red.

What is the HSL color model?


The HSL color model stands for Hue, Saturation, and Lightness. Hue is a
degree on the color wheel (0-360), saturation is a percentage (0-100%),
and lightness is also a percentage (0-100%). For example, hsl(0, 100%,
50%) represents red.

What is the HSLA color model?


The HSLA color model extends HSL by adding an Alpha channel for
opacity, similar to RGBA. For example, hsla(0, 100%, 50%, 0.5)
represents semi-transparent red.

How do you set the background color of an element?


The background-color property sets the background color of an element.
For example, background-color: red; or background-color: #ff0000;.

You might also like