CSS Text Color

CSS Tutorial

CSS Text Color – Complete Beginner Guide

Text color is one of the most important design elements in CSS. It affects readability, branding, accessibility, and overall user experience.

Whether you’re styling headings, paragraphs, links, or buttons — understanding how to control text color properly is essential.

In this beginner-friendly, you’ll learn:

  • How to change text color in CSS

  • Different color value formats

  • RGB, HEX, HSL explained

  • Opacity and transparency

  • Accessibility best practices

  • Real-world examples

  • Common mistakes

Let’s get started

How to Change Text Color in CSS

The color property is used to set text color.

Basic Example


 

This changes paragraph text to blue.

Color Value Types in CSS

CSS supports multiple color formats:

  1. Color Names

  2. HEX

  3. RGB

  4. RGBA

  5. HSL

  6. HSLA

Let’s understand each.

Color Names

Simple predefined color names.

Example:


 

Common names:

  • red

  • blue

  • green

  • black

  • white

  • gray

Easy but limited flexibility.

HEX Colors

HEX uses hexadecimal format.


 

Structure:

#RRGGBB

Example:

  • #000000 → black

  • #ffffff → white

  • #3498db → blue shade

HEX is widely used in design systems.

 RGB Colors

RGB stands for Red, Green, Blue.

Each value ranges from 0 to 255.

Example:

  • rgb(0, 0, 0) → black

  • rgb(255, 255, 255) → white

 RGBA (With Transparency)

RGBA adds alpha (opacity).

Alpha range:

  • 0 → fully transparent

  • 1 → fully visible

Used for overlays and subtle effects.

HSL Colors

HSL stands for:

  • Hue

  • Saturation

  • Lightness

Example:


 

Hue:

  • 0 → red

  • 120 → green

  • 240 → blue

HSL is easier for adjusting brightness and tone.

HSLA

HSL with transparency.

Setting Text Color for Different Elements

Headings

Links


 

Buttons

Inheriting Text Color

Text color is inherited by default.

Example:

All text inside body inherits this color unless overridden.

Text Color vs Background Color

For readability, always consider contrast.

Example:

Good contrast improves accessibility.

Accessibility and Contrast Ratio

Good color contrast improves:

  • Readability

  • SEO

  • User experience

  • Accessibility compliance

WCAG recommends:

  • 4.5:1 contrast ratio for normal text

  • 3:1 for large text

Avoid:

Light gray text on white background.

Using CSS Variables for Text Color

Modern approach:


 

Makes theme changes easier.

Dark Mode Text Colors

Example:

Dark background needs lighter text.

Gradient Text (Advanced)

Creates gradient text effect.

Text Opacity vs RGBA

Avoid:

This affects entire element including children.

Better:

Only text becomes transparent.

Real-World Example – Blog Typography


 

Creates clean hierarchy.

CSS Frameworks and Text Colors

Frameworks like:

  • Bootstrap

  • Tailwind CSS

Provide text color utilities.

Example (Tailwind):

Example (Bootstrap):

Common Beginner Mistakes

  •  Low contrast text
  •  Using too many colors
  •  Not maintaining brand consistency
  •  Forgetting hover states
  • Using opacity instead of RGBA

Keep colors consistent and readable.

Best Practices

  •  Use high contrast
  •  Use consistent color palette
  •  Use CSS variables
  •  Avoid pure black (#000) for body text (use #333 or #222)
  •  Test on different screens

Frequently Asked Questions (FAQs)

1. How do I change text color in CSS?

Use the color property.

2. What is the difference between HEX and RGB?

HEX uses hexadecimal format; RGB uses numeric red, green, and blue values.

3. What is RGBA used for?

RGBA adds transparency to colors.

4. Why is contrast important in text color?

It improves readability and accessibility.

5. Does text color inherit?

Yes, it inherits from parent elements.

Conclusion

CSS text color is essential for creating attractive, readable, and accessible websites.

You learned:

  • Color formats (HEX, RGB, HSL)

  • Transparency options

  • Accessibility tips

  • Real-world examples

  • Best practices

Mastering text color helps you build modern and professional web designs.

You may also like...