# How to Change Text Color in CSS: A Complete Guide Changing text color is one of the most fundamental styling tasks in CSS — and also one of the most flexible. Whether you're tweaking a heading, styling a link, or applying dynamic color based on user interaction, understanding how CSS handles color gives you precise control over your typography. ## The CSS `color` Property The primary way to change text color in CSS is through the **`color` property**. It applies to any text-bearing HTML element — paragraphs, headings, spans, links, list items, and more. ```css p { color: red; } ``` That's the simplest version. But CSS supports several different **color value formats**, each with different strengths depending on your workflow. ## CSS Color Value Formats ### Named Colors CSS includes 140+ predefined **named colors** like `red`, `blue`, `tomato`, `steelblue`, and `rebeccapurple`. They're readable and quick to write, but limited in precision. ```css h1 { color: tomato; } ``` ### Hex Codes **Hexadecimal (hex) values** are the most widely used format in web design. A hex code starts with `#` followed by six characters representing red, green, and blue values. ```css h2 { color: #3a86ff; } ``` A shorthand version works when each pair of characters repeats — `#ffffff` becomes `#fff`, `#000000` becomes `#000`. Hex codes are precise, universally supported, and easy to copy from design tools like Figma or Adobe XD. ### RGB and RGBA The **`rgb()` function** lets you define colors using numeric values (0–255) for red, green, and blue channels. ```css p { color: rgb(58, 134, 255); } ``` Add a fourth value with **`rgba()`** to control **opacity** (0 = fully transparent, 1 = fully opaque): ```css p { color: rgba(58, 134, 255, 0.7); } ``` This is especially useful when layering text over images or backgrounds. ### HSL and HSLA **`hsl()` (Hue, Saturation, Lightness)** is a more intuitive format for designers thinking in terms of color relationships. Hue is a degree on the color wheel (0–360), saturation and lightness are percentages. ```css span { color: hsl(220, 100%, 62%); } ``` Like RGBA, **`hsla()`** adds an alpha channel for transparency. HSL makes it easy to create consistent color palettes by adjusting only the lightness or saturation while keeping the hue fixed. ### The Modern `oklch()` and `color()` Functions 🎨 Newer CSS color spaces like **`oklch()`**, **`lab()`**, and **`color()`** are gaining browser support. These offer wider color gamuts — especially useful for HDR displays — and more perceptually uniform color mixing. They're not yet universally necessary for typical web projects, but worth knowing as browser support continues to expand. ## Targeting Specific Elements You can apply the `color` property at any level of specificity: ```css /* All paragraphs */ p { color: #333; } /* A specific class */ .highlight { color: #e63946; } /* A specific ID */ #intro { color: #1d3557; } /* Inline on a single element */ This text is teal. ``` **Inline styles** override class and element styles due to CSS specificity rules — useful for one-off overrides, though harder to maintain at scale. ## Changing Link Colors Links have **default browser colors** (`blue` for unvisited, `purple` for visited) that often need overriding. Target them with pseudo-classes: ```css a:link { color: #0077b6; } a:visited { color: #023e8a; } a:hover { color: #00b4d8; } a:active { color: #90e0ef; } ``` Order matters here — the standard rule is **LoVe HAte** (Link, Visited, Hover, Active) to ensure cascading works correctly. ## Using CSS Variables for Color Management For larger projects, **CSS custom properties (variables)** make color management far more maintainable: ```css :root { --primary-color: #264653; --accent-color: #e9c46a; } h1 { color: var(--primary-color); } button { color: var(--accent-color); } ``` Change the variable once at `:root`, and every element using it updates automatically. This is the foundation of design token systems used in modern component libraries. ## Color and Accessibility **Color contrast** directly affects readability and legal compliance. The **WCAG 2.1 standard** defines contrast ratio requirements: | Text Type | Minimum Contrast Ratio (AA) | Enhanced Ratio (AAA) | |---|---|---| | Normal text | 4.5:1 | 7:1 | | Large text (18px+ or 14px+ bold) | 3:1 | 4.5:1 | | UI components / icons | 3:1 | — | Tools like the **WebAIM Contrast Checker** or browser DevTools can verify your contrast ratios before publishing. Dark gray text on a white background (`#333` on `#fff`) typically passes AA without effort. Pure black on white (`#000` on `#fff`) exceeds AAA. ## Dynamic Color with JavaScript CSS color values can also be changed at runtime using JavaScript: ```javascript document.querySelector('h1').style.color = '#e76f51'; ``` Or by toggling CSS classes that carry color definitions — the cleaner approach for state-based changes like dark mode or active states. ✅ ## Variables That Determine Your Approach The right color format and method depends on several factors: - **Project scale** — Small static pages suit hex codes. Design systems benefit from CSS variables or tokens. - **Design tool workflow** — Figma exports hex and HSL; your chosen format may simply match what your tools produce. - **Browser support requirements** — Newer color spaces like `oklch()` need fallbacks for older browsers. - **Accessibility requirements** — Projects with compliance obligations (government, healthcare, education) require verifiable contrast ratios, not just visually pleasing colors. - **Framework or preprocessor use** — Sass, Tailwind, and CSS-in-JS tools each have their own color management conventions that interact with native CSS color properties. A developer building a marketing landing page, a design system engineer maintaining a component library, and a beginner styling their first portfolio all have legitimate reasons to land on different color strategies — and all of them start with the same `color` property, applied in whatever way fits the complexity of what they're building. 🖌️