HTML Color Values
In HTML, color can be used in 6 different ways like:
- Color Name
- RGB values
- HEX values
- HSL values
- RGBA values
- HSLA values
HTML Color values and Names
List of all color names with color codes. Here you will find different color names in alphabetical order.
Source: codepen
RGB Values
RGB value is specified using this syntax: rgb( red, green, blue).
It specifies the HTML color values intensity between 0 and 255.
0 displays Blackcolor: rgb(0, 0, 0).
255 displays Whitecolor: rgb(255, 255, 255)
| Colors | HTML Color RGB values |
|---|---|
Black | rgb(0,0,0) | red | rgb(255,0,0) | lime | rgb(0,255,0) | blue | rgb(0,0,255) | yellow | rgb(255,255,0) | aqua | rgb(0,255,255) | pink | rgb(255,0,255) | gray | rgb(192,192,192) | white | rgb(255,255,255) |
Example
<h4 style=" width: 70px; height: 70px;background:rgb(255, 20, 147); border-radius: 50%;"></h4>
HTML Color RGBA Values
The extension of RGB is known as rgba with alpha. And a defines opacity of color.
rgba(red, green, blue, alpha)
0-Completely transparent
1-Not transparent
Example
<h4 style=" width: 70px; height: 70px;background:rgba(25, 20, 283,0.2); border-radius: 50%;"></h4>
HSL Values
An HSL value defines the colors H-hue, S-saturation, L-lightness in the form.
hsl(hue, saturation, lightness)
Here hue measures the colors in a degree ranging 0 to 360.
Red-0
Green-120
Blue-240
Example
<h4 style=" width: 70px; height: 70px; background:hsl(52, 77%, 61%); border-radius: 50%;"></h4>
HSLA Values
The extension of hsl is known as hsla with alpha. And a defines opacity of the color.
hsla(hue, saturation, lightness, alpha)
0-Completely transparent
1-Not transparent
Example
<h4 style=" width: 70px; height: 70px; background:hsla(52, 100%, 50%, 0.2); border-radius: 50%;"></h4>
HTML Color Picker
HEX Values
HEX values defines the values in the form of hexadecimal, the 6digit values denotes color of hexadecimal.
i.e #rrggbb
Here rr(red), gg(green), bb(blue) are values of HEX.
Example
<h4 style=" width: 70px; height: 70px; background:#8a2be2; border-radius: 50%;"></h4>
Interview Questions & Answer
RGB stands for red, green, and blue.
The Syntax of RGB:
color:rgb(0,0,255);
This is for Blue Color.
HEX stands for Hexadecimal.
The Syntax of Hexadecimal Color Code in CSS:
#RRGGBBAA
RR stands for Red, GG stands for Green and BB stands for Blue.
Here 00 and ff specifies color intensity.
It is very simple to make transparent text in HTML. We can use opacity property to make text transparent.
For example:-
<!DOCTYPE html> <html> <head> <style> h1{color:Red; opacity: 0.4;} </style> </head> <body> <h1> This is red color </h1> </body> </html>