HTML Tutorial
HTML Colors
Set text and background with names, hex, RGB, or HSL. Pick contrast you can actually read.
Color on a page
HTML does not have a special color tag. You set color with CSS, often through the styleattribute while you learn. Two properties do most of the work: color for text andbackground-color for the area behind it.
The same value can be written as a name, a hex code, rgb(), or hsl(). Pick one style per project and stay with it.
Color names
Browsers understand a list of named colors such as teal, navy,coral, and white. Names are easy to type. They are also coarse: you cannot nudge teal a little darker without switching to another notation.
Example
<p style="color: teal;">Teal text on the default page background.</p>
<p style="background-color: navy; color: white;">White text on navy.</p>
<p style="background-color: coral; color: black;">Black text on coral.</p>Hex codes: #RRGGBB
A hex color starts with # and six hexadecimal digits: two for red, two for green, two for blue. Each pair runs from 00 (none) to FF (full). #0d9488 is a teal used across StudyGrid. #ffffff is white. #000000 is black.
You can shorten a value when both digits in a pair match: #336699 becomes#369. Prefer the six-digit form until that shortcut feels natural.
Example
<h1 style="color: #0f172a;">Heading</h1>
<p style="background-color: #0d9488; color: #ffffff; padding: 0.75rem;">
Hex teal panel with white text.
</p>
<p style="color: #64748b;">Muted gray for secondary copy.</p>rgb() and hsl()
rgb(red, green, blue) uses numbers from 0 to 255. rgb(13, 148, 136) is the same teal as #0d9488. Add a fourth value as rgba(..., 0.2) when you need a transparent wash.
hsl(hue, saturation, lightness) is often easier to tune. Hue is 0 to 360 around the color wheel. Saturation and lightness are percentages. Raise lightness to fade a color; drop it to darken.
| Notation | Example | Use when |
|---|---|---|
| Name | teal | You want a quick, coarse color |
| Hex | #0d9488 | You copy a brand token |
| RGB | rgb(13, 148, 136) | You already think in channels |
| HSL | hsl(174, 84%, 32%) | You want to lighten or shift hue |
Example
<p style="background-color: rgb(13, 148, 136); color: rgb(255, 255, 255); padding: 0.75rem;">
RGB teal panel.
</p>
<p style="background-color: hsl(174, 84%, 32%); color: hsl(0, 0%, 100%); padding: 0.75rem;">
HSL teal panel. Same hue, written another way.
</p>
<p style="background-color: hsl(174, 84%, 92%); color: hsl(174, 84%, 20%); padding: 0.75rem;">
Same hue, high lightness: a pale wash with dark text.
</p>background-color vs color
color paints the text (and, by default, the text of children). background-colorpaints the box. Set both when you change the background, or the text may vanish into the page.
Example
<!-- Hard to read: light text, no dark background -->
<p style="color: #f8fafc;">Pale text on a white page.</p>
<!-- Readable: dark text on a light panel, or light text on a dark panel -->
<p style="background-color: #0f172a; color: #f8fafc; padding: 0.75rem;">
Light text on a dark panel.
</p>
<p style="background-color: #ecfdf5; color: #065f46; padding: 0.75rem;">
Dark green text on a mint panel.
</p>Contrast is not decoration. If you cannot read the line at a glance, neither can many of your readers. Dark text on a pale background, or pale text on a dark background, is the default you should start from.
Pick contrast you can read
Yellow on white fails. Gray on gray fails. A bright fill with white type can fail if the fill is too light. Check the pair, not each color on its own.
- Body copy: near-black on near-white, such as
#0f172aon#ffffff. - A callout: one strong background and one strong foreground, not two midtones.
- Links: a color that still looks like a link when you cannot see hue, plus an underline.
Inline style is fine for these examples. On a real site, put the colors in a stylesheet so you change a token once. The next chapter covers that.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Chemistry
Universal indicator bands
Named colours, hex, and RGB are three spellings of the same idea: a colour the browser can paint. Hex #166534 is a dark green. The number is not a pH.
On a scale chart, colour is a legend. Keep the pH number in the text so colour-blind readers still get the result.
pH = −log₁₀[H⁺]
Example
<p style="background:#b91c1c;color:#fff;padding:0.5rem">pH 1 — strong acid</p>
<p style="background:#ca8a04;color:#fff;padding:0.5rem">pH 6 — weak acid</p>
<p style="background:#166534;color:#fff;padding:0.5rem">pH 7 — neutral at 25 °C</p>Physics
A temperature strip
Blue for cold and red for hot is a convention, not a law. The numbers −3 °C and 38 °C are the data. Colour is the glance layer on top.
Example
<p style="color:#1d4ed8">Freezer −3 °C — ice</p>
<p style="color:#b91c1c">Oral 38.4 °C — fever band</p>