HTML – COLORS
In HTML, colors are used to style elements and enhance the visual appeal of a webpage. They can be applied to text, backgrounds, borders, and other elements. Colors in HTML are defined using various formats:
1. Named Colors
HTML supports 140 predefined color names, such as:
- red
- blue
- green
- orange
- purple
Example:
<p style="color: red;">This is red text.</p>
This will produce the following result:
2. Hexadecimal Colors
Colors can be specified using a hex code. It is a 6-digit code preceded by #.
- Syntax: #RRGGBB
- RR (red), GG (green), BB (blue) are hexadecimal values ranging from 00 to FF.
<p style="color: #ff0000;">This is red text.</p>
<p style="color: #00ff00;">This is green text.</p>
3. RGB Colors
Colors can also be defined using RGB (Red, Green, Blue) values.
- Syntax: rgb(red, green, blue)
- Values range from 0 to 255. Example:
<p style="color: rgb(255, 0, 0);">This is red text.</p>
This will produce the following result:
4. RGBA Colors
RGBA is an extension of RGB that includes an alpha channel for transparency.- Syntax: rgba(red, green, blue, alpha)
- Alpha ranges from 0 (completely transparent) to 1 (completely opaque).
<p style="color: rgba(255, 0, 0, 0.5);">This is semi-transparent red text.</p>
This will produce the following result:
5. HSL Colors
HSL stands for Hue, Saturation, and Lightness.- Syntax: hsl(hue, saturation%, lightness%)
- Hue: Angle on the color wheel (0–360).
- Saturation: Percentage (0% is gray, 100% is full color).
- Lightness: Percentage (0% is black, 100% is white).
Example:
<p style="color: hsl(0, 100%, 50%);">This is red text.</p>
6. HSLA Colors
HSLA adds an alpha channel for transparency to HSL.- Syntax: hsla(hue, saturation%, lightness%, alpha)
Example:
<p style="color: hsla(0, 100%, 50%, 0.5);">This is semi-transparent red text.</p>
7. Applying Colors in HTML
Colors can be applied to various CSS properties, such as:- Text Color: color
- Background Color: background-color
- Border Color: border-color
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors</title>
</head>
<body style="background-color: #f0f0f0;">
<h1 style="color: blue;">Welcome!</h1>
<p style="color: green;">This is a paragraph with green text.</p>
<div style="border: 2px solid red; background-color: yellow; padding: 10px;">
This is a box with a red border and yellow background.
</div>
</body>
</html>
This will produce the following result:
8. Gradient Colors
Gradients allow you to blend two or more colors smoothly. HTML uses CSS gradients for this purpose.Linear Gradient
- A linear gradient transitions colors in a straight line.
Example:
<div style="background: linear-gradient(to right, red, yellow); width: 300px; height: 100px;">
Linear Gradient Example
</div>
Radial Gradient
A radial gradient transitions colors outward from a central point.
<div style="background: radial-gradient(circle, blue, white); width: 300px; height: 100px;">
Radial Gradient Example
</div>
Conic Gradient (CSS3)
A conic gradient transitions colors around a center point.
<div style="background: conic-gradient(from 0deg, red, yellow, green, red); width: 300px; height: 100px;">
Conic Gradient Example
</div>
9. Transparency with Opacity
The opacity property sets the transparency level for an element. It affects both the background and the content inside.Example:
<div style="background-color: black; color: white; opacity: 0.5; padding: 10px;">
This text and background are semi-transparent.
</div>
10. Adding Shadows to Text
Text shadows can enhance the appearance of text using the text-shadow property.Example:
<h1 style="color: blue; text-shadow: 2px 2px 5px gray;">Text with Shadow</h1>
11. Borders with Colors
Borders can have different colors and styles:Example:
<div style="border: 5px dashed red; padding: 10px;">
Dashed Red Border
</div>
<div style="border: 5px dotted green; padding: 10px;">
Dotted Green Border
</div>
<div style="border: 5px solid blue; padding: 10px;">
Solid Blue Border
</div>
12. Color Keywords
In addition to named colors, you can use color keywords like currentColor, transparent, and inherit:- currentColor: Inherits the color from the parent element.
- transparent: Makes an element's color fully transparent.
- inherit: Forces the element to inherit the color from its parent.
Example:
<div style="color: green;">
Parent text is green.
<p style="color: currentColor;">This text inherits the green color.</p>
</div>
13. Hover Effects with Colors
Colors can change when a user hovers over an element using the :hover pseudo-class.Example:
<a href="#" style="color: black; text-decoration: none;"
onmouseover="this.style.color='red';"
onmouseout="this.style.color='black';">
Hover Over Me
</a>
This will produce the following result:
14. Gradients in Text
You can use gradients in text with some advanced CSS tricks.Example:
<h1 style="background: linear-gradient(to right, red, yellow);
-webkit-background-clip: text;
color: transparent;">
Gradient Text
</h1>
15. Animating Colors
Colors can be animated using CSS transitions and keyframes.Transition Example:
<div style="width: 100px; height: 100px; background-color: blue; transition: background-color 1s;" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='blue';"> </div>
This will produce the following result:
150 Hexadecimal Colors List
| # | Color Name | Color Swatch | Hex Code | Action |
|---|---|---|---|---|
| 1 | Red | #FF0000 | ||
| 2 | Green | #00FF00 | ||
| 3 | Blue | #0000FF | ||
| 4 | Yellow | #FFFF00 | ||
| 5 | Orange | #FFA500 | ||
| 6 | Purple | #800080 | ||
| 7 | Pink | #FFC0CB | ||
| 8 | Brown | #A52A2A | ||
| 9 | Gray | #808080 | ||
| 10 | Black | #000000 | ||
| 11 | Cyan | #00FFFF | ||
| 12 | Magenta | #FF00FF | ||
| 13 | Spring Green | #00FF7F | ||
| 14 | Gold | #FFD700 | ||
| 15 | Chocolate | #D2691E | ||
| 16 | Tomato | #FF6347 | ||
| 17 | Coral | #FF7F50 | ||
| 18 | Dark Orange | #FF8C00 | ||
| 19 | Light Salmon | #FFA07A | ||
| 20 | Dark Salmon | #E9967A | ||
| 21 | Light Coral | #F08080 | ||
| 22 | Indian Red | #CD5C5C | ||
| 23 | Firebrick | #B22222 | ||
| 24 | Dark Red | #8B0000 | ||
| 25 | Medium Violet Red | #C71585 | ||
| 26 | Pale Violet Red | #DB7093 | ||
| 27 | Deep Pink | #FF1493 | ||
| 28 | Hot Pink | #FF69B4 | ||
| 29 | Light Pink | #FFB6C1 | ||
| 30 | Lavender | #E6E6FA | ||
| 31 | Thistle | #D8BFD8 | ||
| 32 | Plum | #DDA0DD | ||
| 33 | Orchid | #DA70D6 | ||
| 34 | Medium Orchid | #BA55D3 | ||
| 35 | Dark Orchid | #9932CC | ||
| 36 | Dark Violet | #9400D3 | ||
| 37 | Blue Violet | #8A2BE2 | ||
| 38 | Medium Purple | #9370DB | ||
| 39 | Medium Slate Blue | #7B68EE | ||
| 40 | Slate Blue | #6A5ACD | ||
| 41 | Royal Blue | #4169E1 | ||
| 42 | Dodger Blue | #1E90FF | ||
| 43 | Deep Sky Blue | #00BFFF | ||
| 44 | Sky Blue | #87CEEB | ||
| 45 | Light Sky Blue | #87CEFA | ||
| 46 | Light Blue | #ADD8E6 | ||
| 47 | Steel Blue | #4682B4 | ||
| 48 | Light Steel Blue | #B0C4DE | ||
| 49 | Light Cyan | #E0FFFF | ||
| 50 | Dark Turquoise | #00CED1 | ||
| 51 | Medium Turquoise | #48D1CC | ||
| 52 | Turquoise | #40E0D0 | ||
| 53 | Light Sea Green | #20B2AA | ||
| 54 | Dark Cyan | #008B8B | ||
| 55 | Teal | #008080 | ||
| 56 | Dark Slate Gray | #2F4F4F | ||
| 57 | Dark Olive Green | #556B2F | ||
| 58 | Olive Drab | #6B8E23 | ||
| 59 | Yellow Green | #9ACD32 | ||
| 60 | Lawn Green | #7CFC00 | ||
| 61 | Chartreuse | #7FFF00 | ||
| 62 | Green Yellow | #ADFF2F | ||
| 63 | Forest Green | #228B22 | ||
| 64 | Sea Green | #2E8B57 | ||
| 65 | Medium Sea Green | #3CB371 | ||
| 66 | Light Green | #90EE90 | ||
| 67 | Pale Green | #98FB98 | ||
| 68 | Dark Green | #006400 | ||
| 69 | Medium Spring Green | #00FA9A | ||
| 70 | Spring Green | #00FF7F | ||
| 71 | Medium Aquamarine | #66CDAA | ||
| 72 | Aquamarine | #7FFFD4 | ||
| 73 | Light Sea Green | #20B2AA | ||
| 74 | Dark Turquoise | #00CED1 | ||
| 75 | Turquoise | #40E0D0 | ||
| 76 | Light Cyan | #E0FFFF | ||
| 77 | Dark Slate Gray | #2F4F4F | ||
| 78 | Dark Olive Green | #556B2F | ||
| 79 | Olive Drab | #6B8E23 | ||
| 80 | Yellow Green | #9ACD32 | ||
| 81 | Lawn Green | #7CFC00 | ||
| 82 | Chartreuse | #7FFF00 | ||
| 83 | Green Yellow | #ADFF2F | ||
| 84 | Medium Sea Green | #3CB371 | ||
| 85 | Sea Green | #2E8B57 | ||
| 86 | Forest Green | #228B22 | ||
| 87 | Dark Green | #006400 | ||
| 88 | Medium Spring Green | #00FA9A | ||
| 89 | Spring Green | #00FF7F | ||
| 90 | Medium Aquamarine | #66CDAA | ||
| 91 | Aquamarine | #7FFFD4 | ||
| 92 | Light Sea Green | #20B2AA | ||
| 93 | Dark Slate Gray | #2F4F4F | ||
| 94 | Dark Olive Green | #556B2F | ||
| 95 | Olive Drab | #6B8E23 | ||
| 96 | Yellow Green | #9ACD32 | ||
| 97 | Lawn Green | #7CFC00 | ||
| 98 | Chartreuse | #7FFF00 | ||
| 99 | Green Yellow | #ADFF2F | ||
| 100 | Medium Sea Green | #3CB371 | ||
| 101 | Sea Green | #2E8B57 | ||
| 102 | Forest Green | #228B22 | ||
| 103 | Dark Green | #006400 | ||
| 104 | Medium Spring Green | #00FA9A | ||
| 105 | Spring Green | #00FF7F | ||
| 106 | Medium Aquamarine | #66CDAA | ||
| 107 | Aquamarine | #7FFFD4 | ||
| 108 | Light Sea Green | #20B2AA | ||
| 109 | Dark Slate Gray | #2F4F4F | ||
| 110 | Dark Olive Green | #556B2F | ||
| 111 | Olive Drab | #6B8E23 | ||
| 112 | Yellow Green | #9ACD32 | ||
| 113 | Lawn Green | #7CFC00 | ||
| 114 | Chartreuse | #7FFF00 | ||
| 115 | Green Yellow | #ADFF2F | ||
| 116 | Medium Sea Green | #3CB371 | ||
| 117 | Sea Green | #2E8B57 | ||
| 118 | Forest Green | #228B22 | ||
| 119 | Dark Green | #006400 | ||
| 120 | Medium Spring Green | #00FA9A | ||
| 121 | Spring Green | #00FF7F | ||
| 122 | Medium Aquamarine | #66CDAA | ||
| 123 | Aquamarine | #7FFFD4 | ||
| 124 | Light Sea Green | #20B2AA | ||
| 125 | Dark Slate Gray | #2F4F4F | ||
| 126 | Dark Olive Green | #556B2F | ||
| 127 | Olive Drab | #6B8E23 | ||
| 128 | Yellow Green | #9ACD32 | ||
| 129 | Lawn Green | #7CFC00 | ||
| 130 | Chartreuse | #7FFF00 | ||
| 131 | Green Yellow | #ADFF2F | ||
| 132 | Medium Sea Green | #3CB371 | ||
| 133 | Sea Green | #2E8B57 | ||
| 134 | Forest Green | #228B22 | ||
| 135 | Dark Green | #006400 | ||
| 136 | Medium Spring Green | #00FA9A | ||
| 137 | Spring Green | #00FF7F | ||
| 138 | Medium Aquamarine | #66CDAA | ||
| 139 | Aquamarine | #7FFFD4 | ||
| 140 | Light Sea Green | #20B2AA | ||
| 141 | Dark Slate Gray | #2F4F4F | ||
| 142 | Dark Olive Green | #556B2F | ||
| 143 | Olive Drab | #6B8E23 | ||
| 144 | Yellow Green | #9ACD32 | ||
| 145 | Lawn Green | #7CFC00 | ||
| 146 | Chartreuse | #7FFF00 | ||
| 147 | Green Yellow | #ADFF2F | ||
| 148 | Medium Sea Green | #3CB371 | ||
| 149 | Sea Green | #2E8B57 | ||
| 150 | Forest Green | #228B22 |
FAQ about HTML Colors:
Q 1. What are the different ways to specify colors in HTML?
Answer: HTML supports the following ways to define colors:Named Colors: e.g., red, blue, green
Hexadecimal Colors: e.g., #ff0000, #00ff00
RGB Colors: e.g., rgb(255, 0, 0)
RGBA Colors: e.g., rgba(255, 0, 0, 0.5)
HSL Colors: e.g., hsl(0, 100%, 50%)
HSLA Colors: e.g., hsla(0, 100%, 50%, 0.5)
Q 2. How do I change the text color in HTML?
Answer: You can use the color
<p style="color: red;">This text is red.</p>
Q 3. How do I set a background color?
Answer: Use thebackground-color
<div style="background-color: lightblue;">This has a light blue background.</div>
Q 4. What is the difference between RGB and RGBA?
- RGB: Defines colors using Red, Green, and Blue values.
Example: rgb(255, 0, 0)- RGBA: Adds an alpha channel for transparency. Example:
rgba(255, 0, 0, 0.5)Q 5. Can I use transparent colors in HTML?
Answer: Yes, you can use:The
transparentRGBA/HSLA values with an alpha of less than 1 for partial transparency.
<p style="color: rgba(255, 0, 0, 0.5);">Semi-transparent red text.</p>
Q 6. What are gradients in HTML?
Answer: Gradients are smooth transitions between colors. CSS supports:- Linear Gradient: Transitions in a straight line.
- Radial Gradient: Transitions from a central point outward.
- Conic Gradient: Rotational transitions around a point.
Example:
<div style="background: linear-gradient(to right, red, yellow);">
Linear Gradient Example
</div>
Q 7. How do I create a hover effect with colors?
Answer: You can use the:hoverExample:
<a href="#" style="color: black;" onmouseover="this.style.color='blue';" onmouseout="this.style.color='black';">Hover Me</a>
Q 8. What are CSS variables, and how can I use them for colors?
Answer: CSS variables allow you to define reusable color values:
<style>
:root {
--main-color: red;
}
p {
color: var(--main-color);
}
</style>
<p>This text uses a CSS variable for color.</p>
9. What is the difference between HSL and HSLA?
Answer:
- HSL: Defines colors using Hue, Saturation, and Lightness. Example: hsl(0, 100%, 50%)
- HSLA: Adds an alpha channel for transparency. Example: hsla(0, 100%, 50%, 0.5)
10. How can I ensure my colors are accessible?
Answer:
- Use high contrast between text and background.
- Follow WCAG guidelines for a contrast ratio of at least 4.5:1 for small text and 3:1 for large text.
- Use accessibility tools to test contrast levels.
Example of high-contrast colors:
<p style="color: black; background-color: white;">This is easy to read.</p>