How to Change Text Color in HTML
To change text color in HTML, use the CSS color property: <p style="color: blue;"> for one element, or p { color: #1e40af; } in a stylesheet for every paragraph. Colors can be names like red, hex codes like #ff0000, or rgb() and hsl() values. To color a few words, wrap them in a <span>.
Last updated: October 4, 2026
Quick answer
Step 1: Choose where to set the color
Text color is set with CSS, which you can put in three places (see how to link CSS to HTML for details):
- Inline, on one element:
<h1 style="color: navy;">. Quick, but you have to repeat it everywhere. - A class in a
<style>block or stylesheet:.highlight { color: crimson; }, then<p class="highlight">. Reusable. - An element selector:
p { color: #334155; }colors every paragraph on the page;body { color: … }sets the default for all text.
Step 2: Pick a color format
CSS understands several ways of writing the same color. All of these are the same red:
| Format | Example | Notes |
|---|---|---|
| Name | red, navy, tomato | 148 named colors; easy to read, limited choice |
| Hex | #ff0000 or short #f00 | The most common format; two digits each for red, green, blue (00–ff) |
| RGB | rgb(255 0 0) | Red, green and blue from 0 to 255 |
| RGB + transparency | rgb(255 0 0 / 50%) | Half-transparent red; also hex with 8 digits: #ff000080 |
| HSL | hsl(0 100% 50%) | Hue (0–360°), saturation, lightness: easiest for making lighter/darker shades |
Older code writes RGB and HSL with commas, rgb(255, 0, 0) and rgba(255, 0, 0, 0.5). Both styles work in every current browser.
Step 3: Find the exact color you want
You don’t need to work out hex codes by hand. Use a color picker, then copy the value:
- In Chrome, Edge or Firefox, open DevTools (right-click → Inspect), click any color square in the Styles panel and use the picker or eyedropper.
- Search “color picker” in Google for a quick picker in the results.
- Or use an
<input type="color">like the one in the example below, which shows the hex code as you pick.
Step 4: Color only part of a sentence
To color a few words without starting a new line, wrap them in a <span> and give it a class. A span has no meaning or style of its own, so it’s made for this. If the words are important, use <strong> (important) or <em> (emphasis) instead and color those; for highlighted text, <mark> adds a highlighter background.
Background, link and highlight colors
- Background:
background-colorcolors the area behind the text. Set text and background colors together so they always contrast. - Links: links have their own default blue and purple, so a
coloron the paragraph doesn’t change them. Style them witha { color: … }(see how to add a link). - Selected text:
::selection { background: #c7d2fe; color: #1e1b4b; }changes the highlight when visitors select text. - Placeholder text in forms:
input::placeholder { color: #64748b; }. currentColor: a keyword meaning “the current text color”, handy for borders and SVG icons that should match the text.
Make sure text is readable: contrast
Colored text must stand out clearly from its background, or many people (including anyone reading a phone in sunlight) can’t read it. The WCAG accessibility guidelines ask for a contrast ratio of at least 4.5 : 1 for normal text and 3 : 1 for large text (about 24px, or 19px bold). Chrome’s DevTools shows the ratio when you click a color in the Styles panel, and free online contrast checkers do the same.
Compare the pairs in the example: the light grey on white fails, the darker grey passes.
Also, never use color alone to carry meaning. “Fields in red are required” doesn’t work for colorblind visitors; add a word or symbol, like “Required *”.
Choosing a color palette (and dark mode)
Most professional sites use a small, consistent set of colors: a very dark color for body text (often a dark grey rather than pure black, which can feel harsh), a lighter grey for less important text, and one or two accent colors for links, buttons and highlights. Define them once as CSS custom properties and reuse them everywhere:
Changing a color is then a one-line edit, and the prefers-color-scheme media query switches to light text on a dark background for visitors whose device is set to dark mode. Check the contrast in both modes.
What about <font color>?
You may find old code like <font color="red">. The <font> tag was removed from HTML: browsers still display it so old pages don’t break, but it’s invalid and can’t be changed from a stylesheet. Replace it with a <span> and a CSS class.
Common text color mistakes
- Low contrast. Light grey on white or colored text on a similar background. Check the ratio.
- Misspelled color names.
colour: blue(British spelling) orcolor: gray-blueis ignored; check the property and the value. - Missing
#in hex codes.color: 2563ebdoesn’t work; it must be#2563eb. - Expecting links to inherit the color. Links keep their own color unless you style
a. - Too many colors. One or two accent colors plus a dark text color look more professional than a rainbow.
- Inline styles everywhere. Use classes so you can change a color in one place.