HTML Colors
Colors in HTML are used to style text, backgrounds, borders, and other elements on a web page. Colors make a page visually appealing and help guide the reader's attention to important content.
In HTML, colors are applied using the style attribute with CSS properties. There are three main ways to define a color in HTML.
Ways to Define Colors in HTML
1. Color Names
HTML supports 140 standard color names that can be typed directly as text. These are the simplest way to apply colors.
<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>
<p style="background-color: yellow;">Yellow background.</p>2. HEX Color Codes
A HEX (hexadecimal) color code starts with a # symbol followed by 6 characters (0–9 and A–F). It represents the mix of Red, Green, and Blue values. HEX is the most widely used color format in web development.
Structure: #RRGGBB where RR = red, GG = green, BB = blue
<p style="color: #ff0000;">Red text using HEX</p>
<p style="color: #0000ff;">Blue text using HEX</p>
<p style="color: #008000;">Green text using HEX</p>
<p style="color: #ff6600;">Orange text using HEX</p>
<p style="background-color: #ffffcc;">Light yellow background</p>3. RGB Color Values
RGB stands for Red, Green, Blue. Each value ranges from 0 to 255. When all three are 0, the result is black. When all three are 255, the result is white.
Structure: rgb(red, green, blue)
<p style="color: rgb(255, 0, 0);">Red using RGB</p>
<p style="color: rgb(0, 0, 255);">Blue using RGB</p>
<p style="color: rgb(0, 128, 0);">Green using RGB</p>
<p style="color: rgb(0, 0, 0);">Black using RGB</p>
<p style="color: rgb(255, 255, 255); background-color: rgb(0,0,0);">White on Black</p>Color Comparison Table
| Color | Name | HEX | RGB |
|---|---|---|---|
| Red | #ff0000 | rgb(255,0,0) | |
| Green | #008000 | rgb(0,128,0) | |
| Blue | #0000ff | rgb(0,0,255) | |
| Orange | #ffa500 | rgb(255,165,0) | |
| Purple | #800080 | rgb(128,0,128) | |
| Black | #000000 | rgb(0,0,0) | |
| White | #ffffff | rgb(255,255,255) | |
| Gray | #808080 | rgb(128,128,128) |
Background Color
The background-color property sets the background color of an element. It can be applied to the entire page body or individual elements.
<!-- Background color on a paragraph -->
<p style="background-color: #e0f7fa;">This paragraph has a light blue background.</p>
<!-- Background color on a heading -->
<h3 style="background-color: #ffe082;">Highlighted Heading</h3>
<!-- Background color on body (whole page) -->
<body style="background-color: #f5f5f5;">
<p>Page has a light gray background.</p>
</body>Text Color
The color property changes the color of the text inside an element.
<h2 style="color: #2e86c1;">Blue Heading</h2>
<p style="color: #555555;">Gray body text for easy reading.</p>
<p style="color: rgb(200, 0, 0);">Dark red text for warnings.</p>RGBA – Color with Transparency
RGBA is like RGB but with an extra value called alpha (transparency). The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).
<p style="background-color: rgba(255, 0, 0, 1.0);">Fully opaque red</p>
<p style="background-color: rgba(255, 0, 0, 0.5);">50% transparent red</p>
<p style="background-color: rgba(255, 0, 0, 0.2);">80% transparent red</p>Key Points to Remember
- Colors in HTML can be written as names, HEX codes, or RGB values
- HEX colors start with
#followed by 6 characters (e.g.,#ff5733) - RGB values range from 0 to 255 for each color channel
- Use
colorto set text color andbackground-colorto set background color - RGBA allows adding transparency to a color
- Always ensure enough contrast between text color and background color for readability