Working with Colors in HTML
Backgrounds and Colors
In this lesson, we will cover the most common ways of working with colors in HTML.
Colors in HTML
Colors are essential in web design, as they can express emotions, establish user engagement, and improve usability. Multiple methods are available to specify colors in HTML, such as color names, hexadecimal codes, and RGB values. This lesson will explore the different color formats and teach us how to include them effectively in HTML.
Color Formats
HTML supports several color formats, The most popular formats are:
- Color Names
- Hexadecimal Color Codes
- RGBA Values
Color Names
Color names are predefined names for specific colors, such as "red," "green," or "blue." HTML supports 148 color names. Below is the list of all 148 color names with their color preview.
| AliceBlue | AntiqueWhite | Aqua | Aquamarine |
| Azure | Beige | Bisque | Black |
| BlanchedAlmond | Blue | BlueViolet | Brown |
| BurlyWood | CadetBlue | Chartreuse | Chocolate |
| Coral | CornflowerBlue | Cornsilk | Crimson |
| Cyan | DarkBlue | DarkCyan | DarkGoldenRod |
| DarkGray | DarkGrey | DarkGreen | Aquamarine |
| DarkKhaki | DarkMagenta | DarkOliveGreen | DarkOrange |
| DarkOrchid | DarkRed | DarkSalmon | DarkSeaGreen |
| DarkSlateBlue | DarkSlateGray | DarkSlateGrey | DarkTurquoise |
| DarkViolet | DeepPink | DeepSkyBlue | DimGray |
| DimGrey | DodgerBlue | FireBrick | FloralWhite |
| ForestGreen | Fuchsia | Gainsboro | GhostWhite |
| Gold | GoldenRod | Gray | Grey |
| Green | GreenYellow | HoneyDew | HotPink |
| IndianRed | Indigo | Ivory | Khaki |
| Lavender | LavenderBlush | LawnGreen | LemonChiffon |
| LightBlue | LightCoral | LightCyan | LightGoldenRodYellow |
| LightGray | LightGrey | LightGreen | LightPink |
| LightSalmon | LightSeaGreen | LightSkyBlue | LightSlateGray |
| LightSlateGrey | LightSteelBlue | LightYellow | Lime |
| LimeGreen | Linen | Magenta | Maroon |
| MediumAquaMarine | MediumBlue | MediumOrchid | MediumPurple |
| MediumSeaGreen | MediumSlateBlue | MediumSpringGreen | MediumTurquoise |
| MediumVioletRed | MidnightBlue | MintCream | MistyRose |
| Moccasin | NavajoWhite | Navy | OldLace |
| Olive | OliveDrab | Orange | OrangeRed |
| Orchid | PaleGoldenRod | PaleGreen | PaleTurquoise |
| PaleVioletRed | PapayaWhip | PeachPuff | Peru |
| Pink | Plum | PowderBlue | Purple |
| RebeccaPurple | Red | RosyBrown | RoyalBlue |
| SaddleBrown | Salmon | SandyBrown | SeaGreen |
| SeaShell | Sienna | Silver | SkyBlue |
| SlateBlue | SlateGray | Snow | SpringGreen |
| SteelBlue | Tan | Teal | Thistle |
| Tomato | Turquoise | Violet | Wheat |
| White | WhiteSmoke | Yellow | YellowGreen |
Here's an example of how to use the color names to specify a color:
Example
<p style="background-color: GreenYellow">This text has a greenyellow background color.</p>Note: The color names are not case-sensitive and can also be written in lowercase.
Hexadecimal Color Codes
In HTML, colors can be defined using hexadecimal color codes. A hexadecimal color code is a six-digit code that represents the intensity of red, green, and blue (RGB) values used to create a color. The code is written with a # prefix, such as #DC143C.
Consider the hexadecimal color code #8A2BE2. In this code, except #, the first two characters represent the intensity of red, the next two characters represent the intensity of green, and the last two characters represent the intensity of blue.
The advantage of using hexadecimal color codes is that they allow a wide range of colors to be defined, and all modern web browsers widely support them. Additionally, hexadecimal color codes are concise and easy to use, making them a popular choice for web designers and developers.
You can easily convert any color to its equivalent hexadecimal code by just converting its red, green and blue intensity values in hexadecimal code.
Here's an example of how to use the hexadecimal color code to specify a color:
Example
<p style="background-color: #7FFFD4">This text has a background color.</p>RGBA Values
In HTML, RGBA (Red, Green, Blue, Alpha) values are used to specify colors using a combination of red, green, and blue values with an additional alpha value that defines the opacity or transparency of the color.
The values are specified using a CSS property called "rgba()", where the first three values are the RGB values ranging from 0 to 255, and the fourth value is the alpha value ranging from 0 (completely transparent) to 1 (completely opaque). You can decrease the transparency by increasing the value in fraction like 0.5 for 50% transparency.
Here's an example of how to use the "rgba()" property to specify a color:
Example
<p style="background-color: rgba(255, 0, 0, 0.5)">This text has a semi-transparent red background.</p>In the above example, the RGB values are 255 (red), 0 (green), and 0 (blue), and the alpha value is 0.5, which makes the color semi-transparent.
Using RGBA values in HTML can give you more control over the colors and their transparency, and it can be useful for creating visually appealing and dynamic designs on web pages.
Use the color picker tool given below to choose a color and get its Hex and RGBA values. Click on the color button to open the color picker.
