HTML Colors

You already changed look with the style attribute and marked meaning with formatting and quotations. Colors shape mood and readability. In this beginner HTML path you practice color values inside style: common names, hex codes, and rgb() functions. Full design systems belong in CSS later; here you learn to read and write the forms correctly.

What is an HTML color value?

A color value tells the browser which color to use for a CSS property such as color or background-color. The same value forms work in inline style and in stylesheets. Beginners meet three practical forms first: a readable name (tomato), a hex code (#c0392b), and an rgb() mix (rgb(192, 57, 43)). They can describe the same hue in different spellings.

Direct answer

Set text with color and the area behind content with background-color. Choose a value form that fits the moment: a name for quick demos, hex when you copy from a palette, or rgb() when you think in red/green/blue channels from 0 to 255. Keep contrast strong enough to read. As projects grow, move shared colors into CSS instead of repeating long inline attributes on every page.

Value forms at a glance

Colors with names

Named colors are the friendliest starting point. Pair text color and background carefully so the words stay readable.

Reading the sample

• The first paragraph only changes text color
• The second sets both background and text so navy stays clear on light blue
• Names are case-insensitive in CSS, but lowercase is a clear habit
• Not every English color word is a valid CSS name — stick to common ones you have verified

Hex colors

A hex color usually starts with # followed by six characters from 0–9 and a–f. The pairs mean red, green, and blue. #000000 is black; #ffffff is white. You do not need to memorize a catalog — pick from a palette and paste carefully.

Hex tips

• Keep the # — 336699 alone is not the same as #336699 in this lesson’s form
• Use valid hex digits only; letters stop at f
• Short three-digit hex exists in CSS (#333), but six-digit codes are enough for this course stage
• Double-check copy/paste so a missing digit does not silently fail

rgb() colors

The rgb() function mixes red, green, and blue as numbers from 0 to 255. rgb(255, 0, 0) is pure red. This form is handy when you adjust one channel at a time.

Connecting the forms

The same hue can often be written as a name, hex, or rgb. Pick one form per demo so your eye learns the syntax. Later in CSS you will also meet other notations; these three cover early HTML practice.

Contrast and readability

A valid color can still be a bad choice. Light yellow text on white may parse fine and still be hard to read. When you set both color and background-color, check that the text stands out. For real sites, contrast is part of accessibility — start the habit now even in small demos.

Practice in your editor

1. Create three short paragraphs under a heading.
2. Color the first text with a name (teal or similar).
3. Color the second text with a hex value.
4. Give the third a background-color using rgb(), and set a dark color if needed for contrast.
5. Save and refresh. Confirm each form works.
6. Intentionally break one hex (remove a digit), refresh, fix it — that trains careful syntax.

Mistakes that hide or hurt colors

• Mixing up color (text) with background-color (behind the text)
• Writing #33, #gggggg, or hex without # when you meant a six-digit code
• Low contrast combinations that look “styled” but are hard to read
• Building a whole brand theme only with repeated inline styles instead of learning shared CSS next
• Assuming every English color word is a valid CSS name without checking

Summary

• Use color and background-color in style for quick color demos
• Values: names, hex (#RRGGBB), or rgb(r, g, b)
• Hex pairs map to red, green, blue; rgb channels run from 0 to 255
• Prefer readable contrast whenever text sits on a colored background
• Move shared colors into CSS as pages and projects grow
• Verify with save and refresh; fix syntax carefully when a color “does nothing”