Course
Color
CSS Tutorial
This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.
Colors
CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e. its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.
You can specify your color values in various formats. Following table lists all the possible formats
These formats are explained in more detail in the following sections
CSS Colors - Keyword
CSS supports the color names to be directly passed to the property background-color and color. 140 standard color names are supported by CSS.
Few of the examples are listed in the table below:
Here is an example:
<html><head><style> #colorkeyword{ background-color: aqua; padding: 10px; }</style></head><body> <h3>Color Keyword - example</h3> <p>As the keyword passed is aqua, the background will appear as aqua colored..</p> <div id="colorkeyword"> This div element has a colored background based on the color keyword passed, i.e aqua. </div></body></html>CSS Colors - Hexadecimal Codes
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples of hexadecimal notation.
Note: To specify the hexadecimal codes, you can use upper case or lower case letters.
Here is an example:
<html><head><style> #hexcode { background-color: #00ff00; padding: 10px;}</style></head><body> <h3>Hexadecimal code - example</h3> <p>As the hexadecimal code is #00ff00 the background will appear green.</p> <div id="hexcode"> This div element has a green background. </div></body></html>CSS Colors - Short Hexadecimal Codes
This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each short hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples of short hexadecimal notation.
Note: To specify the hexadecimal codes, you can use upper case or lower case letters.
Here is an example:
<html><head><style> #shorthex { background-color: #00f; padding: 10px; }</style></head><body> <h3>Short Hexadecimal code - example</h3> <p>As the short hexadecimal code is #00f the background will appear blue.</p> <div id="shorthex"> This div element has a blue background. </div></body></html>CSS Colors - RGB Values
- This color value is specified using the rgb( ) property.
- It takes three values, one each for red, green, and blue.
- The value can be an integer between 0 and 255 or a percentage.
NOTE: All the browsers does not support rgb() property of color so it is recommended not to use it.
Following is the example to show few colors using RGB values.
Here is an example:
<html><head><style> #rgbvalue { background-color: rgb(255,0,255); padding: 10px; }</style></head><body> <h3>RGB - example</h3> <p>As the rgb(255,0,255) is set the background will appear accordingly.</p> <div id="rgbvalue"> This div element has a colored background based on the rgb values. </div></body></html>CSS Colors - RGBA Values
- This color value is specified using the rgba( ) property.
- It takes four values, one each for red, green, and blue and the last value as the alpha (transparency) value.
- The alpha value can be any value between 0 and 1.
NOTE: All the browsers do not support rgba() property of color so it is not recommended.
Following is the example to show few colors using RGBA values.
Here is an example:
<html><head><style> #rgbavalue { background-color: rgba(255,0,255,0.2); padding: 10px; }</style></head><body> <h3>RGBA - example</h3> <p>As the rgba(255,0,255,0.2) is set the background will appear with transparency value of 0.2.</p> <div id="rgbavalue"> This div element has a colored background based on the rgba values. </div></body></html>CSS Colors - HSL Values
- This color value is specified using the hsl() function.
- HSL stands for hue, saturation and lightness.
- Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%).
Following is the example to show few colors using HSL property.
Here is an example:
<html><head><style> #hslvalue { background-color: hsl(355,70%,50%); padding: 10px;}</style></head><body> <h3>HSL - example</h3> <p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values passed.</p> <div id="hslvalue"> This div element has a colored background based on the hsl values hsl(355,70%,50%). </div></body></html>CSS Colors - HSLA Values
- This color value is specified using the hsl() function.
- HSLA stands for hue, saturation, lightness and alpha.
- It takes four values, first for hue, second for saturation, third for lightness and fourth is the alpha (transparency) value.
- Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%), and alpha value can be in between 0 and 1.
Following is the example to show few colors using HSLA property.
Here is an example:
<html><head><style> #hslavalue { background-color: hsla(355,70%,50%,0.4); padding: 10px; }</style></head><body> <h3>HSLA - example</h3> <p>As the hsla(355,70%,50%,0.4) is set the background will appear based on the hsla values passed, with high transparency.</p> <div id="hslavalue"> This div element has a colored background based on the hsl values hsla(355,70%,50%,0.4). </div></body></html>CSS Colors - currentcolor keyword
The currentcolor keyword signifies the value of the color property of an element. It can be passed to any other styling property using the keyword currentcolor.
Here is an example:
<html><head><style> #currcolor { color: red; border: 5px solid currentcolor; }</style></head><body> <h2>The currentcolor Keyword</h2> <p>As the currentcolor keyword is used for border after color property is set as red, the border will also appear red.</p> <div id="currcolor"> This div element has a red text color and a red border. </div></body></html>CSS Colors - Building Color Codes
You can build millions of color codes using our Color Code Builder. Check the HTML Color Code Builder.
To use this tool, you would need a Java Enabled Browser.
CSS Colors - Browser Safe Colors
Here is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette
CSS Colors - Related Properties
All the properties related to color are listed in the table below: