HSL color values define colors using three parameters: hue (color type), saturation (color intensity), and lightness (brightness). HSLA extends HSL by adding an alpha parameter, which specifies the opacity level of the color.
HSL Color Picker
Use this HSL Color Picker to create your desired color by adjusting the hue, saturation, and lightness levels:
Input
Adjust the hue, saturation, and lightness to create your desired color.
HSL color values define colors using three parameters: hue (color type), saturation (color intensity), and lightness (brightness). HSLA extends HSL by adding an alpha parameter, which specifies the opacity level of the color.
HSL Color Codes
HTML supports the HSL color model, which stands for Hue, Saturation, and Lightness. It provides a flexible and intuitive way to define colors. The HSL representation allows developers to specify hues, adjust saturation, and control lightness, offering a wider range of color choices.
Hue: It is a degree on the color wheel from 0 to 360, where 0 is red, 120 is green, and 240 is blue.
Saturation: It is a percentage value that indicates how intense or vivid the color is, where 0% means a shade of gray, and 100% is the full color.
Lightness: This is also a percentage value that indicates how bright or dark the color is, where 0% is black, 50% is neither light nor dark, and 100% is white.
Creating HSL Color
To create HSL color, use the hsl() function and pass the values for hue, saturation, and lightness. Following is the syntax to use the hsl() function:
hsl(hue, saturation%, lightness%)
Example
Here’s an example demonstrating the use of HSL color in HTML:
<!DOCTYPE html><html lang="en"><head><title>HTML HSL Color Example</title><style>
This box has an HSL color background
</p></div></body></html></pre>
In this example, the background-color property of the .hsl-color-box class is set using the HSL color representation. The values are as follows:
Hue (H): 120 degrees (green)
Saturation (S): 50%
Lightness (L): 50%
Adjust these values to experiment with different colors. The HSL model offers a more flexible way to work with colors, making it easier to fine-tune and control the appearance of elements on a webpage.
HSLA Color Codes
In HTML, HSLA stands for hue, saturation, lightness, and alpha. It is an extension of the HSL color code with an optional alpha parameter for transparency. This alpha channel specifies how transparent or opaque a color is with a number between 0.0 and 1.0. Here, 0.0 means fully transparent and 1.0 means no transparency.
Creating HSLA Color
To create HSLA colors, use the hsla() function by passing values for hue, saturation, lightness, and alpha for transparency. The hsla() function can be used in CSS files or inside the style attribute in HTML. The following is the syntax to use the hsla() function to create HSLA color:
hsla(hue, saturation%, lightness%, alpha)
Example
In this example, we have set the background color and text color using HSLA color code:
Hexadecimal (Hex) colors are specified by combining the hexadecimal values (#RRGGBB) of red (RR), green (GG), and blue (BB) colors, with each value ranging from 00 to FF, where 00 represents the lowest intensity and FF represents the highest intensity of each color.
HEX Color Values
Each HEX color value starts with a hash sign (#) and includes six digits (#RRGGBB). The first two digits (RR) specify the red component, the next two (GG) specify the green component, and the final two (BB) specify the blue component. This method allows precise color customization for web design.
Example
Here is the example to create Red, Green, and Blue colors using the hex values:
<!DOCTYPE html><html><head><title>Example Hex Color Values</title></head><body><!-- Red color --><div style="background-color: #FF0000; width: 100px; height: 100px;">
RED Color
</div><!-- Green color --><div style="background-color: #00FF00; width: 100px; height: 100px;">
GREEN Color
</div><!-- Blue color --><div style="background-color: #0000FF; width: 100px; height: 100px;">
BLUE Color
</div></body></html></pre>
Using Hex Colors in HTML
To use hex colors in HTML, we can either assign them directly to an element using the style attribute, or define them in a style tag or sheet using the color property.
Example 1: Using style Attribute
Here is an example to assign a hex color to an HTML element using the style attribute:
<body><p style="color: #FF0000;">This text is red.</p></body>
Example 2: Using a style Tag
Here is an example to assign a hex color to an HTML element using the style tag:
<head><style>
p {
color: #FF0000;
}
</style></head><body><p>This text is red.</p></body>
Hex Color Codes for Common Colors
The following table has a few colors represented using hexadecimal color codes:
Color
Color HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Examples of Hex Colors
Here are some examples that show how to use hexadecimal colors in HTML:
Setting Background Color for Body
In the following example, we are defining the background color of the HTML page using the hex color code:
The text color of the paragraph is
styled using HEX code.
</td></tr></table></body></html></pre>
Selecting the right colors for designing a webpage is difficult. Even if you have a color in your mind, you need to make a computer understand the hexadecimal value of the color. To make your job easier, we suggest using our HTML color picker tool.
HTML RGB and RGBA colors are supported by all browsers. RGB color value represents the intensity of RED, GREEN, and BLUE in a color. RGBA is an extension of RGB that also specifies an alpha channel for opacity of color.
We can make any colors using combinations of RED, GREEN, and BLUE. If you set the maximum intensity of all three colors, then the resulting color will be white. Similarly, if we give zero intensity for all RGB values, we will get black color.
HTML RGB Colors
In HTML, RGB stands for Red, Green, and Blue, and it is a way of specifying colors by their intensity values. These colors can be used in HTML elements, such as backgrounds, borders, and fonts. To use RGB colors in HTML, we need to use the rgb() function inside the style attribute of an element.
The rgb() Function
The rgb() function takes three parameters, namely the red value, the green value, and the blue value. Each value is specified using an integer that can range from 0 to 255, where 0 means no color and 255 means full color intensity. Mixing these values will create other different colors.
Syntax
rgb(red, green, blue)
Example
Here is an example to set background of HTML tags by color code using rgb() values.
<!DOCTYPE html><html><head><title>HTML Colors by RGB code</title></head><body style = "background-color: rgb(255,255,0);"><p>Use different color code for body and table and see the result. </p><table style = "background-color: rgb(0,0,0);"><tr><td><p style = "color: rgb(255,255,255);">This text will appear white on black background.</p></td></tr></table></body></html>
On the executing the above HTML code, it will produce a result with texts on different backgrounds.
HTML RGBA Colors
In HTML, RGBA stands for Red, Green, Blue, and Alpha, which is an extension of RGB with an additional channel for opacity. The alpha channel specifies how transparent or opaque a color is with a number between 0.0 and 1.0.
For example, rgba(255, 0, 0, 1.0) is fully opaque red, rgba(255, 0, 0, 0.5) is semi-transparent red, and rgba(255, 0, 0, 0.0) is fully transparent red.
To specify the RGBA color values in HTML, the rgba() function is used inside the style attribute or CSS file.
The rgba() Function
The rgba() function takes four parameters. The parameter alpha accepts a decimal value between 0 and 1 to determine opacity of a RGB color. The value 0 indicates that the color is not visible and value 1 indicates color is fully visible.
Syntax
rgba(red, green, blue, alpha)
For example, rgba(255, 0, 0, 1.0) is fully opaque red, rgba(255, 0, 0, 0.5) is semi-transparent red, and rgba(255, 0, 0, 0.0) is fully transparent red.
Example
In this example, we have set the background color and text color using RGBA color code:
<!DOCTYPE html><html><head><title>HTML Colors by RGBA code</title></head><body style = "width:300px; height:100px;"><h2 style = "background-color: rgba(128 ,128 ,128 ,1.0);">Setting the Background using rgba()</h2><table style = "background-color: rgba(255, 0 ,0 ,0.8);"><tr><td><p style = "color: gba(255, 255, 255, 1.0);">The text color of the paragraph is styled using rgba()</p></td></tr></table></body></html>
On execution, the above HTML code will generate one heading and a paragraph with different background colors.
Comparison of RGB and RGBA Colors
The following table shows the comparison of the RGB and RGBA colors using RGB values and their opacity-reduced form using the rgba() function:
RGB Color
RGB function
RGBA Color
RGBA function
rgb(0, 0, 0)
rgba(0, 0, 0, 0.7)
rgb(255, 0, 0)
rgba(255, 0, 0, 0.7)
rgb(0,255,0)
rgba(0, 255, 0, 0.7)
rgb(0, 0, 255)
rgba(0, 0, 255, 0.7)
rgb(255, 255, 0)
rgba(255, 255, 0, 0.7)
rgb(0, 255, 255)
rgba(0, 255, 255, 0.7)
rgb(255, 0, 255)
rgba(255, 0, 255, 0.7)
rgb(192, 192, 192)
rgba(192, 192, 192, 0.7)
rgb(255, 255, 255)
rgba(255, 255, 255, 0.7)
RGB vs RGBA Colors
RGB color defines a color using only three color components (red, green, and blue) with values ranging from 0 to 255. RGB color does not support transparency. Whereas the RGBA color defines a color similar to RGB but also adds an alpha value for transparency, where 0 is for the fully transparent color and 1 is for the fully opaque. In short, RGB is used for solid colors, while RGBA is used when transparency is required.
HTML color names are the simplest way to define the color for the HTML elements, as they are predefined names for the colors, such as red, green, blue, etc. By using these HTML color names, you can apply colors without having knowledge of RGB and hexadecimal color codes.
Standard Color Names
The table below lists the 16 color names introduced in HTML 3.2, along with their hex codes and color samples:
Color Name
Hex Value
Color
aqua
#00ffff
black
#000000
blue
#0000ff
fuchsia
#ff00ff
green
#008000
gray
#808080
lime
#00ff00
maroon
#800000
navy
#000080
olive
#808000
purple
#800080
red
#ff0000
silver
#c0c0c0
teal
#008080
white
#ffffff
yellow
#ffff00
Extended Color Names
The following table lists colors, known as extended colors, that are not part of the HTML or XHTML specifications but are supported by most major browsers, along with their hex codes and color samples:
