Whether you call them HTML color codes, hex color codes, or color hex codes, they all refer to the same thing: a way to tell browsers what color to display. Here's every method you can use to color text in HTML.
Method 1: Hex Color Codes
The most popular method. Six characters representing Red, Green, Blue values in hexadecimal.
<p style="color: #FF6600;">Orange text</p>
<p style="color: #1E90FF;">Blue text</p>
<p style="color: #2ECC71;">Green text</p>How Hex Codes Work
Each pair of characters represents one channel (0-255 in decimal, 00-FF in hex):
Method 2: RGB
<p style="color: rgb(255, 102, 0);">Orange text</p>
<p style="color: rgba(0, 0, 255, 0.5);">Semi-transparent blue</p>Method 3: HSL
<p style="color: hsl(30, 100%, 50%);">Orange text</p>
<p style="color: hsla(240, 100%, 50%, 0.7);">70% blue</p>Method 4: Named Colors
HTML/CSS supports 140 named colors:
<p style="color: tomato;">Tomato</p>
<p style="color: dodgerblue;">Dodger Blue</p>
<p style="color: mediumseagreen;">Medium Sea Green</p>See the full list on our HTML Color Names page.
Method 5: CSS Variables (Modern Best Practice)
:root {
--color-primary: #FF6600;
--color-text: #1A1A2E;
--color-muted: #6B7280;
}
h1 { color: var(--color-primary); }
p { color: var(--color-text); }
small { color: var(--color-muted); }Quick Reference: Most Used Text Colors
| Purpose | Hex Code | Preview |
|---|---|---|
| Primary text | #111827 | Nearly black, easy on the eyes |
| Secondary text | #6B7280 | Gray, for supporting content |
| Link text | #2563EB | Standard blue, universally recognized |
| Error text | #DC2626 | Red, signals problems |
| Success text | #16A34A | Green, signals completion |
| Warning text | #D97706 | Amber, signals caution |
| Disabled text | #9CA3AF | Light gray, indicates inactive state |