HTML Colors | Color Codes in HTML - Hexadecimal, RGB, and More
HTML Colors
HTML Colors are a way to define the color of text, backgrounds, borders, and other elements on a web page.
There are several ways to specify colors in HTML:
Color names: HTML has a list of predefined color names that you can use to specify colors. For example, red, green, blue, yellow, black, and white are all valid color names.
RGB values: You can also specify a color using RGB (Red, Green, Blue) values. This involves specifying the amount of red, green, and blue in a color using a scale of 0-255. For example, rgb(255, 0, 0) represents pure red, rgb(0, 255, 0) represents pure green, and rgb(0, 0, 255) represents pure blue.
Hexadecimal values: Another way to specify colors is to use hexadecimal values. Hexadecimal values use a combination of numbers and letters to represent the amount of red, green, and blue in a color. For example, #FF0000 represents pure red, #00FF00 represents pure green, and #0000FF represents pure blue.
Here is an example of how to set the background color of a web page using each of these methods:
Editor
Background Color
You can set the background color of an element using the background-color property in CSS (Cascading Style Sheets).
As an example:
Editor
Text Color
You can set the color of text within an element using the color property in CSS (Cascading Style Sheets).
As an example:
Editor
Border Color
You can set the color of an element's border using the border-color property in CSS (Cascading Style Sheets).
As an example:
Editor
Color Values
Color values can be specified using a variety of methods.
Here are some common ways to specify color values:
Color names
You can use color names to specify the color of an element. For example, red, green, and blue are all valid color names in HTML.
<p style="color: red;">This text is red.</p>
<p style="color: blue;">This text is blue.</p>
<p style="color: green;">This text is green.</p>
RGB values
You can specify a color using RGB (Red, Green, Blue) values. RGB values range from 0 to 255 for each color component. For example, rgb(255, 0, 0) specifies pure red.
<p style="color: rgb(255, 0, 0);">This text is pure red.</p>
<p style="color: rgb(0, 255, 0);">This text is pure green.</p>
<p style="color: rgb(0, 0, 255);">This text is pure blue.</p>
Hexadecimal values
You can specify a color using a hexadecimal value. A hexadecimal color value is a six-digit code that represents the amount of red, green, and blue in a color. For example, #FF0000 is pure red.
<p style="color: #FF0000;">This text is pure red.</p>
<p style="color: #00FF00;">This text is pure green.</p>
<p style="color: #0000FF;">This text is pure blue.</p>
RGBA values
You can specify a color using RGBA (Red, Green, Blue, Alpha) values. RGBA values are similar to RGB values, but they also include an alpha channel, which represents the opacity of the color. Alpha values range from 0 to 1, with 0 being completely transparent and 1 being completely opaque. For example, rgba(255, 0, 0, 0.5) specifies semi-transparent red.
<p style="color: rgba(255, 0, 0, 0.5);">This text is semi-transparent red.</p>
<p style="color: rgba(0, 255, 0, 0.5);">This text is semi-transparent green.</p>
<p style="color: rgba(0, 0, 255, 0.5);">This text is semi-transparent blue.</p>
HSL values
You can specify a color using HSL (Hue, Saturation, Lightness) values. HSL values describe the color using three components: hue (the color itself), saturation (the intensity of the color), and lightness (the brightness of the color). Hue values range from 0 to 360, while saturation and lightness values range from 0% to 100%. For example, hsl(0, 100%, 50%) specifies pure red.
<p style="color: hsl(0, 100%, 50%);">This text is pure red.</p>
<p style="color: hsl(120, 100%, 50%);">This text is pure green.</p>
<p style="color: hsl(240, 100%, 50%);">This text is pure blue.</p>
HSLA values
You can specify a color using HSLA (Hue, Saturation, Lightness, Alpha) values. HSLA values are similar to HSL values, but they also include an alpha channel, which represents the opacity of the color. Alpha values range from 0 to 1, with 0 being completely transparent and 1 being completely opaque. For example, hsla(0, 100%, 50%, 0.5) specifies semi-transparent red.
<p style="color: hsla(0, 100%, 50%, 0.5);">
This text is semi-transparent red.
</p>
<p style="color: hsla(120, 100%, 50%, 0.5);">
This text is semi-transparent green.
</p>
<p style="color: hsla(240, 100%, 50%, 0.5);">
This text is semi-transparent blue.
</p>