The color property in CSS is used to define the color of text content on a webpage. It helps improve readability and enhances the visual appearance of web pages by allowing developers to apply different text colors.
- Supports multiple color formats such as color names, HEX, RGB, RGBA, HSL, and HSLA values.
- Plays an important role in creating attractive and user-friendly web designs.
- Helps maintain proper contrast and accessibility for better user experience.
Syntax
color: color | initial | inherit;Property Values
1. color: Specifies the color to apply. It can be a keyword, hex code, RGB/RGBA, HEX, HSL/HSLA value, or global values.
- RGB/RGBA Values: Use the red, green, and blue color model, with optional alpha transparency.
- Hexadecimal Values: Colors represented in hexadecimal format starting with #.
- HSL/HSLA Values: Define colors using hue, saturation, lightness, and optional alpha transparency.
2. Initial: Sets the color to its default value.
3. Inherit: Inherits the color value from its parent element.
Using Color Keywords
Named colors are predefined names in CSS for specific colors such as "blue," "green," and "red." It provides a simple way to assign colors without needing to know their RGB or HEX values.
Syntax
color: color_name; <!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<!--Driver Code Ends-->
<style>
h1 {
color: black;
}
p {
font-size: 20px;
color: green;
}
.red-color {
font-size: 20px;
color: red;
}
.blue-color {
font-size: 20px;
color: blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>
CSS Color Property
</h1>
<p>
GEEKSFORGEEKS: A computer science portal
</p>
<p class="red-color">
GEEKSFORGEEKS: A computer science portal
</p>
<p class="blue-color">
GEEKSFORGEEKS: A computer science portal
</p>
</body>
</html>
<!--Driver Code Ends-->
RGB/RGBA Value
Here R stands for Red, G stands for Green, and B stands for Blue. The color will be assigned to the text by using the range of these values. These values range from 0 to 255. And, A stands for Alpha channel. Which represents the opacity or opaque of the color.
Syntax
color: RGBA(value, value, value, value);<h1 style="color: RGB(0, 0, 0);">
CSS color property
</h1>
<p style="color: RGB(0, 150, 0);">
RGB(0, 150, 0)-This is the code for green color.
</p>
<p style="color: RGB(255, 0, 0);">
RGB(255, 0, 0)-This is the code for red color.
</p>
<p style="color: RGB(0, 0, 255);">
RGB(0, 0, 255)-This is the code for blue color.
</p>
Hexa-Decimal Value
It represents the value of the color in hexadecimal format. It should start with the prefix #. These values range from #000000 to #FFFFFF. And, If there is an alpha channel that defines the opacity of the color, then we will represent it by adding FF (if 100%) after the hex code.
Syntax:
color: #AAE123;<h1 style="color: #000000;">
CSS color property
</h1>
<p style="color: #00aa00;">
#00AA00-This is the code for green color.
</p>
<p style="color: #ff0000;">
#FF0000-This is the code for red color.
</p>
<p style="color: #0000ff;">
#0000FF-This is the code for blue color.
</p>
HSL/HSLA values
HSL stands for Hue, Saturation, and Lightness. The range of hue will be from (0 to 360 degree), saturation means the Grey effect it ranges from (0 to 100%), and Lightness means the effect of light which ranges from (0 to 100%).
Syntax
color: HSL(value, value, value);<h1 style="color: HSL(0, 0, 0);">
CSS Color property
</h1>
<p style="color: HSL(147, 50%, 47%);">
HSL(147, 50%, 47%)-This is the code for green color.
</p>
<p style="color: HSL(0, 100%, 50%);">
HSL(0, 100%, 50%)-This is the code for red color.
</p>
<p style="color: HSL(240, 100%, 50%);">
HSL(240, 100%, 50%)-This is the code for blue color.
</p>
initial
The initial keyword sets the color property to its default value, typically black in most browsers.
Syntax
color: initial;inherit
The initial value inherit property in CSS makes an element adopt the same value for a specific property as its
Syntax
color: inherit ;