CSS Colors: Colors are specified using predefined colors names, or RGB, HEX, HSL, RGBA, HSLA values.
The color property in CSS is used to set the color of HTML elements. Commonly, this property is used to set the background color or the font color of an element.
In CSS, we use color values for specifying the color. We can likewise use this property for the border-color and other decorative effects.
We can define the color of an element by using the accompanying ways:
- RGB format.
- RGBA format.
- Hexadecimal notation.
- HSL.
- HSLA.
- Built-in color.
In this tutorial, you will learn-
In this article, you will learn-
- 1 CSS Color Names
- 2 Tomato
- 3 Orange
- 4 DodgerBlue
- 5 MediumSeaGreen
- 6 Gray SlateBlue
- 7 Violet LightGray
- 8 CSS Background Color
- 9 Hello World
- 10 CSS Text Color
- 11 CSS Border Color
- 12 Hello World
- 13 Hello World
- 14 Hello World
- 15 CSS Color Values
- 16 rgb(255, 99, 71)
- 17 #ff6347
- 18 hsl(9, 100%, 64%)
- 19 rgba(255, 99, 71, 0.5)
- 20 hsla(9, 100%, 64%, 0.5)
CSS Color Names
In CSS, a color can be specified by using a predefined color name:
<!DOCTYPE html> <html> <body> <h2 style="background-color:Tomato;">Tomato</h2> <h2 style="background-color:Orange;">Orange</h2> <h2 style="background-color:DodgerBlue;">DodgerBlue</h2> <h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2> <h2 style="background-color:Gray;">Gray</h1> <h2 style="background-color:SlateBlue;">SlateBlue</h2> <h2 style="background-color:Violet;">Violet</h1> <h2 style="background-color:LightGray;">LightGray</h2> </body> </html>
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
CSS Background Color
You can set the background color for HTML elements:
<!DOCTYPE html> <html> <body> <h2 style="background-color:DodgerBlue;">Hello World</h2> <p style="background-color:Tomato;"> Hello </p> </body> </html>
Hello World
Welcome to CSS Tutorial
CSS Text Color
You can set the color of text:
<!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">Hello World</h3> <p style="color:DodgerBlue;">Welcome to CSS Tutorial..</p> <p style="color:MediumSeaGreen;">Learn CSS.</p> </body> </html>
Hello World
Welcome to CSS Tutorial..
Learn CSS.
CSS Border Color
You can set the color of borders:
<!DOCTYPE html> <html> <body> <h2 style="border: 2px solid Tomato;">Hello World</h2> <h2 style="border: 2px solid DodgerBlue;">Hello World</h2> <h2 style="border: 2px solid Violet;">Hello World</h2> </body> </html>
Hello World
Hello World
Hello World
CSS Color Values
In CSS, colors can likewise be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
<!DOCTYPE html> <html> <body> <p>Same as color name "Tomato":</p> <h2 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h2> <h2 style="background-color:#ff6347;">#ff6347</h2> <h2 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h2> <p>Same as color name "Tomato", but 50% transparent:</p> <h2 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h2> <p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p> </body> </html>
Same as color name “Tomato”:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Same as color name “Tomato”, but 50% transparent:
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
