Prev Next

CSS Text Color

Controlling text color allows you to match branding, improve readability, and create visual hierarchy. The color property accepts named colors, HEX, RGB, or HSL values, letting you adjust text appearance to fit your design.

Key Topics

Basic Usage

Set the text color with color: <value>;. For example, color: red; or color: #333;.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Text Color Example</title>
    <style>
        body {
            color: #333;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
        }
        p {
            color: #555;
        }
    </style>
</head>
<body>
    <h1>Blue Heading</h1>
    <p>This paragraph text is a darker gray.</p>
</body>
</html>

Explanation: Different text elements can have distinct colors to create visual hierarchy, guiding users’ attention to headings, links, or emphasis.

Contrast and Readability

Always consider background color. High contrast between text and background improves readability and accessibility.

Branding Consistency

Match text colors to your brand’s palette, reinforcing brand identity and visual consistency across the site.

Key Takeaways

  • Readability: Choose colors that are easy to read against the background.
  • Branding: Use brand colors for cohesive visuals.
  • Flexibility: Numerous color formats give you fine control over text appearance.
Prev Next