HTML Color Names

HTML color names provide a simple and readable way to set colors for text, backgrounds, borders, and other elements on your web page. Instead of using complex codes, you can define colors by their names like “red,” “blue,” or “gold.” At The Coding College, we help you learn these essential basics to make your web pages visually appealing.

What Are HTML Color Names?

HTML provides 140 predefined color names, each representing a specific shade. These names are supported by all major browsers and can be used directly in your HTML and CSS files.

Example Usage:

<p style="color:blue;">This text is blue!</p>
<div style="background-color:gold;">This div has a gold background!</div>

Popular Color Categories

1. Basic Colors

These are common colors like red, green, and blue.

  • Red: red
  • Green: green
  • Blue: blue

Example:

<p style="color:red;">This is red text.</p>
<p style="color:green;">This is green text.</p>
<p style="color:blue;">This is blue text.</p>

2. Shades of Gray

HTML includes various shades of gray ranging from black to white.

  • Black: black
  • Gray: gray
  • Light Gray: lightgray
  • White: white

Example:

<p style="background-color:gray;">This has a gray background.</p>
<p style="color:white; background-color:black;">White text on a black background.</p>

3. Warm Colors

These colors are vibrant and evoke energy.

  • Orange: orange
  • Gold: gold
  • Yellow: yellow

Example:

<p style="color:gold;">This text is gold!</p>
<p style="background-color:orange;">This background is orange.</p>

4. Cool Colors

Cool colors give a calm and relaxed feel.

  • Cyan: cyan
  • Teal: teal
  • Light Blue: lightblue

Example:

<p style="color:cyan;">This text is cyan.</p>
<p style="background-color:lightblue;">This background is light blue.</p>

5. Special Colors

Unique color names add variety to your designs.

  • Coral: coral
  • Indigo: indigo
  • Plum: plum

Example:

<p style="color:coral;">This text is coral.</p>
<p style="color:plum;">This text is plum.</p>

Complete List of HTML Color Names

Here’s a quick look at some common HTML color names:

  • Red, Green, Blue, Yellow, Pink, Cyan, Magenta, Gold, Silver, Violet, Orange, Indigo, Olive, Brown, Gray, Black, White.

For a full list of color names, visit our detailed tutorial at The Coding College.

Why Use HTML Color Names?

  • Readability: Easy to understand and remember.
  • Browser Compatibility: Supported by all browsers.
  • Ease of Use: Ideal for quick prototyping and simple designs.

Start exploring the magic of colors in your web designs today! For more tutorials and coding resources, stay tuned to The Coding College. Let’s bring creativity to your code!

Leave a Comment