CSS Colors
Colors in CSS are specified by using the predefined color names, or by using color values.
CSS Color Names
Colors in CSS can be specified by using a predefined color name:
In an example below, let’s write a code to specify a color by using predefined color names:
Example
<!DOCTYPE html> <html> <body> <h1 style="background-color:Powderblue;">Powderblue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:Green;">Green</h1> <h1 style="background-color:Yellow;">Yellow</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:LightGray;">LightGray</h1> </body> </html>
Similarly, we can also change the text color of HTML Elements.
Green Text Color
Red text color paragraph
Example
<html> <body> <h3 style="color:Green;">Green Text Color</h3> <p style="color:Red;">Red text color paragraph</p> </body> </html>
CSS Border Color
With the help of CSS we can also set the color of borders. Like this:
Some text….
Hello World….
Example
<html> <body> <h3 style="border:2px solid Red;">Some text....</h3> </br> <h3 style="border:2px solid Green;">Hello World....</h3> </body> </html>
CSS Color Values
In CSS, we can also specify colors using RGB values, HEX values, HSL values, RGBA values HSLA values:
These color values can be used just like color name “Green”
rgb(0, 255. 0)
#00ff00
hsl(120. 100%, 50%)
RGB Values
In CSS, we can also specify colors by using RGB values. RGB represents Red, Green, Blue (RGB).
The value of RGB ranges between 0-255 which specifies the intensity of a color. For example rgb (0, 255, 0) is displayed as Green, because the green is set to its highest value(255) and other two colors (red and blue) are set to their lowest value (0). In the same way rgb(255, 0, 0) is displayed as red, and rgb(0, 0, 255) is displayed as blue.
Now if we wanna to display black color, we will set all color parameters at their lowest i.e rgb (0, 0, 0). And if we set all color parameters at their highest value i.e rgb (255, 255, 255) it will display a white color.
In an example below, let’s add RGB color values in our code.
Example
<!DOCTYPE html> <html> <body> <h2>Let's define colors by using RGB values</h2> </br> <p style="background-color:rgb(0, 255, 0);">This paragraph has green background color.</p> <p style="color:rgb(255, 0, 0);">This text is a red text.</p> <p style="background-color:rgb(0, 255, 0); color:rgb(255, 0, 0);">This is a red text with green background.</p> </body> </html>
HEX Codes
A hexadecimal color code starts with the symbol “#” followed by six numbers or alphabets. The hex codes defines the #RRGGBB, where the RR is red, GG is green and BB is blue. A hexadecimal values ranges between (00-ff) (same as decimal 0-255) where the 00 is the lowest value and (ff) is the highest.
For example #ff0000 is displayed as red, because red is set to its highest value, and other two colors (green, blue) is set to their lowest value. Similarly #00ff00 is displayed as green and #0000ff is displayed as blue.
If we set all color parameters to their highest (ff), like this #ffffff, it will display white color. And if we set all color parameters to their lowest value (00), it will display black color.
Now in an example below let’s add Hex color values in our code.
Example
<html> <body> <h2>let's specify colors by using HEX color codes </h2> </br> <p style="background-color:#0000ff; color:#ffffff;" > This text has blue background.</p> <p style="color:#00ff00;>This is a green text.</p> </body> </html>
HSL Values
In CSS, we can also specify colors using HSL values. HSL (hue, saturation, lightness).
Hue is a degree on the color and it ranges from 0 to 360. Here 0 is red, 120 is green and 240 is blue. Saturation is a percentage value, where 0% means a shade of gray and 100% is the full color. Lightness is also a percentage, where 0% is black and 100% is white.
In an below Example below, let’s add HSL color values in our code.
Example
<html> <body <h1><b>Let's specify colors using HSL values.</b></h1> <h3 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h3> <h3 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h3> </body> </html>
Related Posts
