Changing text color is one of the most fundamental skills in web development. Whether you're building your first website or fine-tuning a design, understanding how to apply hex color text is essential.
Using the CSS color Property
The primary way to change text color in HTML is through the CSS color property. You can apply it inline, in a block, or in an external stylesheet.
Inline Style
<p style="color: #FF6600;">This text is orange.</p>CSS Class
.highlight {
color: #1E90FF;
}<p class="highlight">This text is Dodger Blue.</p>Color Value Formats
CSS supports multiple ways to specify colors:
Hex Color Codes
The most common format. A # followed by 6 hexadecimal characters representing Red, Green, and Blue channels.
color: #FF0000; /* Red */
color: #00FF00; /* Green */
color: #0000FF; /* Blue */
color: #000000; /* Black */
color: #FFFFFF; /* White */RGB Values
Specify each channel as a number from 0 to 255.
color: rgb(255, 99, 71); /* Tomato */
color: rgb(30, 144, 255); /* Dodger Blue */HSL Values
Define color by Hue (0-360°), Saturation (0-100%), and Lightness (0-100%).
color: hsl(9, 100%, 64%); /* Tomato */
color: hsl(210, 100%, 56%); /* Dodger Blue */Named Colors
CSS supports 140 named colors that work in all browsers.
color: tomato;
color: dodgerblue;
color: coral;Best Practices
1. Use hex codes for consistency — They're the most universally supported and compact format.
2. Check contrast ratios — Ensure your text color has at least a 4.5:1 contrast ratio against the background for accessibility (WCAG AA).
3. Define colors as CSS variables — This makes your color scheme easy to update across your entire site.
:root {
--text-primary: #1a1a2e;
--text-secondary: #666666;
--accent: #FF6600;
}
body { color: var(--text-primary); }
a { color: var(--accent); }4. Test on multiple backgrounds — Use our hex color text tool to preview your text on different backgrounds before committing.