? HTML Colors

⚡ Quick Overview

Colors in HTML are used to improve the look and feel of a webpage. You can apply colors to text, backgrounds, borders, and more using CSS. Beginners should understand how to use color names, HEX values, and RGB values to make content more attractive and guide the reader’s attention.

? Key Concepts

Color Names: Predefined names like red, green, blue.
HEX Codes: Six-digit codes starting with #, e.g. #ff0000 for red.
RGB Values: Red, Green, Blue components, e.g. rgb(0, 0, 255) for blue.
Background Color: Use background-color to color areas like boxes and sections.
Inline CSS: Use the style attribute to quickly apply color to a single element.

? Syntax and Theory

In most cases, colors are applied using CSS. You can write CSS inline using the style attribute or in separate style rules. A basic CSS rule looks like: selector { property: value; }, for example color: red; or background-color: yellow;.

Inline styles are useful for quick tests, but for larger projects it is better to move your color rules into internal or external CSS so they are easier to reuse and maintain.

? Code Example

? View Color Usage Example

This text is red.

This text is green.

This text is blue.

This box has a yellow background.

? Live Output

? Live Output Preview

This text is red.

This text is green.

This text is blue.

This box has a yellow background.

The browser reads the inline style attributes and applies the color rules to each element. Text color is set using the color property, and areas like boxes or sections use background-color.

? Tips and Best Practices

Use readable color combinations, such as dark text on a light background, for better accessibility.
Stick to a small, consistent color palette to make your site look professional.
Prefer CSS classes for repeated styles instead of copying the same inline style many times.
Use HEX or RGB when you need precise shades that are not available as basic color names.
Always keep good contrast between text and background so content is easy to read.
Test your color choices on different screens and in both light and dark environments.

? Try It Yourself

Create two paragraphs: one with red text and another with green text using inline style.
Make a
with a light blue background and some padding around the text.
Experiment with these HEX colors: #ff6347 (tomato) and #4caf50 (green).
Use RGB to create purple, e.g. rgb(128, 0, 128), and apply it to a heading.
Try setting similar text and background colors and observe how readability is affected.

? Summary

HTML colors are applied using CSS properties like color and background-color. You can use color names, HEX codes, or RGB values to control how text and elements look. By choosing accessible color combinations and using CSS efficiently, you can make your pages both attractive and easy to read.