HTML Colors
HTML Color Formats
HTML supports named colors like “gold” or “lightgreen,” as listed in the html colors chart. Secondly, you can use Hex color values (e.g. #FFD700 for gold hex colors) or rgb() functions (e.g. rgb(0, 0, 255) for blue). Finally, CSS also accepts RGBA for transparency.
1. HTML Color Names and Charts
HTML color names such as “gold” or “salmon” make it easy to remember your palette. HTML Color Names are predefined, human-readable labels that map to exact hexadecimal RGB values. They ensure consistent rendering across all browsers without needing to memorize complex hex colors code like #FFD700 for gold. We can see some HTML Color name below:
| Red | Green | Blue | Gold |
| LightPink | OliveDrab | LightGreen | Orange |
| Purple | Teal | SteelBlue | DeepPink |
| SeaGreen | White | OrangeRed | DodgerBlue |
| SlateGray | GoldenRod | Black | LightGray |
You can generate similar color palette using the HTML Color Names, as shown below:
<table style="width:100%; border-collapse: collapse;">
<tr>
<td style="background-color:#FF0000;color:#FFFFFF;height:80px; width: 20%; text-align:center;border:3px solid white;">Red </td>
<td style="background-color:#DC143C;color:#FFFFFF;height:80px; width: 20%; text-align:center;border:3px solid white;">Crimson </td>
<td style="background-color:#B22222;color:#FFFFFF;height:80px; width: 20%; text-align:center;border:3px solid white;">FireBrick </td>
<td style="background-color:#8B0000;color:#FFFFFF;height:80px; width: 20%; text-align:center;border:3px solid white;">DarkRed </td>
<td style="background-color:#FA8072;color:#000000;height:80px; width: 20%; text-align:center;border:3px solid white;">Salmon </td>
</tr>
<tr>
<td style="background-color:#008000;color:#FFFFFF;height:80px; width: 20%; text-align:center;border:3px solid white;">Green </td>
<td style="background-color:#006400;color:#FFFFFF;height:80px; width: 20%; text-align:center;border:3px solid white;">DarkGreen </td>
<td style="background-color:#228B22;color:#FFFFFF;height:80px; width: 20%; text-align:center;border:3px solid white;">ForestGreen </td>
<td style="background-color:#32CD32;color:#000000;height:80px; width: 20%; text-align:center;border:3px solid white;">LimeGreen </td>
<td style="background-color:#00FF7F;color:#000000;height:80px; width: 20%; text-align:center;border:3px solid white;">SpringGreen </td>
</tr>
</table>
2. Coloring Paragraph Text
In HTML, coloring paragraph text can be done easily using the <style> attribute with the color property to apply a specific font color. Using the example below you can change the color of any text.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight-text { color: #6B8E23; } /* common CSS html css colors */
</style>
</head>
<body>
<p style="color: #0000FF;">This uses inline blue rgb code (#0000FF).</p>
<p class="highlight-text">This uses a CSS class for color font html code.</p>
</body>
</html>
3. Coloring Text with Gradients
In HTML, you can create stylish gradient effects on text using CSS linear-gradient and text clipping. You can use example below for understanding both inline styling and a reusable CSS class.
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-text {
background: linear-gradient(to right, #f12711, #f5af19);
-webkit-background-clip: text;
color: transparent; /* apply gradient to text */
}
</style>
</head>
<body>
<h1 style="background: linear-gradient(to right, #6a11cb, #2575fc);
-webkit-background-clip: text;
color: transparent;">
This inline-styled text shows a blue–purple gradient.
</h1>
<h2 class="gradient-text">
This text uses a CSS class for an orange–yellow gradient.
</h2>
</body>
</html>
4. Backgrounds and Borders
In HTML, you can style backgrounds and borders using the <style> attribute with properties like <background-color> for backgrounds and <border> for borders to enhance the visual appeal of elements.
<!DOCTYPE html>
<html>
<head>
<style>
.bg-pink { background-color: #FFB6C1; }
.border-gold { border: 4px solid #FFD700; }
</style>
</head>
<body>
<div style="background-color:#90EE90; padding:20px;">
Inline background (hex colors code).
</div>
<br>
<div class="bg-pink border-gold" style="padding:20px;">
CSS background and gold hex colors border.
</div>
</body>
</html>
5. Dynamic Color Box with Buttons
A Dynamic Color Box with Buttons lets users interactively change an element’s background color by clicking buttons that apply different HTML color codes via JavaScript. You can also try another color codes below:
<!DOCTYPE html>
<html>
<body>
<div style="display:flex; flex-direction:column; align-items:center;">
<div id="colorBox" style="width:100px;height:100px;background-color:#FFD700;margin-bottom:10px;"></div>
<button onclick="document.getElementById('colorBox').style.backgroundColor='#FF0000'" >Red</button> <br>
<button onclick="document.getElementById('colorBox').style.backgroundColor='rgb(0,128,0)'">Green</button> <br>
<button onclick="document.getElementById('colorBox').style.backgroundColor='rgba(0,0,255,0.7)'">Semi‑Transparent Blue</button>
</div>
</body>
</html>
6. Using the Browser’s Color Picker
The Browser’s Color Picker example demonstrates how users can select any color with <input type=”color”> and instantly display its corresponding hash color code in your HTML.
<!DOCTYPE html>
<html>
<body>
<div style="display:flex; flex-direction:column; align-items:center;">
<p>Click on the color box to choose different color.</p>
<input type="color" id="picker" value="#FF0000"style= "height: 90px; width: 180px; "> <br>
<input type="text" id="colorCode" readonly placeholder="Hash color code">
<script>
document.getElementById('picker').addEventListener('input', function() {
document.getElementById('colorCode').value = this.value;
});
</script>
</div>
</body>
</html>
HTML Color Selector
This HTML Color Selector allows users to pick colors from a interactive color input field. Upon selection user also get nearby 8 shades of colors as suggestion.
🌈 Color Picker
HTML Color Table
This HTML color table offers an intuitive visual guide to standardized web-safe colors, displaying each hue alongside its name, HEX code, and RGB values.
Web Resources on HTML Colors
1. University of New Mexico: Colors in HTML
2. Colorado State University: HTML Color
3. Swarthmore College: Color Tutorial
4. University of Hawaii System: Hexadecimal Color Codes
5. MDN Web Docs: CSS color Property
6. MDN Glossary: HTML Color Codes
Questions and Answers related to HTML Colors
HTML color codes define colors using hexadecimal values. For example, #0000FF represents blue. You can use it in CSS like this: color: #0000FF; for text or background-color: #0000FF; for backgrounds.
To apply gold color in HTML, use the hex code #FFD700. Example: color: #FFD700; for text or background-color: #FFD700; for background elements.
A hash color code (e.g., #FF5733) is the same as a hex code, using a combination of six hexadecimal digits. RGB format, like rgb(255,87,51), represents the same color but uses decimal values.
Online tools like color pickers allow users to select and generate hex codes like #FFB6C1 (light pink) or #6B8E23 (olive green) for use in CSS.
CMYK (used for print) must be converted to RGB for HTML use. Online tools or software like Photoshop can help convert CMYK values to RGB, which can then be used as hex or rgb() values in CSS.
To use a blue RGB color, define it as rgb(0, 0, 255). RGB provides flexibility over hex since it allows opacity adjustments using RGBA.
Text color is set using color, while background color is set using background-color. Example: color: #333; vs. background-color: #FFF;.
Online tools like Pantone converters let users input a hex code (e.g., #FF5733) and get the closest Pantone match for branding consistency.
Use an online color palette tool like Coolors or Adobe Color to generate a cohesive color scheme, then use a hex color picker to apply specific colors in HTML/CSS.
You can Edit the codes Here
