How to add and change text color in HTML

16 Oct 2021

You can add or change text color on your website using the CSS color property.

The color property can take three types of values: color keyword, HEX color code, rgb and rgba values.

We are going to set the text color for the cricket website.

3 Ways to set text color in CSS

1. Using Color Keyword Name

Using the reserved color keywords we can set the text color of any HTML elements. For Example, you can set the link color to orange:

a {
  color: orange;
}

There are about 163 reserved CSS color keywords that you can use to color your text.

2. Using Color Hex RGB Values

The first two numbers are for red, followed by green and blue respectively. Each color can have values between 00 to 99 and aa to ff. Example:

h1 {
  color: #343a40;
}

3. Using RGB Color Values

RGB colors are work on all browsers. The first number is red, followed by green and then blue. The numbers can have any value from 0 and 255.The numbers are separated by comma.

Example:

p {
  color: rgb(33, 37, 41);
}

4. Using RGBA Color Values

Works the same way as rgb but has an additional fourth number.

This fourth number is used to set the opacity. It can have values between 0 and 1. At opacity of 0, the text color is invisible. At opacity of 0.5, the text color is half visible, while at opacity of one, the text is fully visible.

Example:

.nav-links {
  rgba(156, 54, 181, 0);
}

.nav-links {
  rgba(156, 54, 181, 0.5);
}

.nav-links {
  rgba(156, 54, 181, 1);
}

Choosing text color for your website

If you are struggling to find a suitable color for your text, head over to OpenColor. You will find a collection of colors with good contrast.

Ensure the colors you choose complement your website’s design.