How to Change the Color of HTML Elements

Technical writer

CSS

09.01.2025

Reading time: 5 min

When working with a webpage, you often need to enrich the markup by adding visual variety. This can be driven by design requirements or personal preferences. There are many ways to make a page more visually appealing, from font choices to the dynamic behavior of content when scrolling.

One of the key graphic techniques is changing the background or text color on the page. Modern browsers allow you to flexibly choose background colors or combinations and specify the desired values in a format that suits you.

Elements That Can Have Color

Almost any HTML element can have its color. The color is applied in different ways depending on what exactly you want to color. For example, if you need to change the color of text in HTML, you can use the color attribute, and for borders around it, the border-color attribute.

These attributes can be set either directly in the markup using HTML attributes or in a CSS file linked to the markup.

When working with colors in HTML, elements can be roughly divided into two groups: text elements and block elements. In text elements, you set the color of the text and its styling, while in block elements, you set the background and border colors.

Text Elements

Text elements include, for example, paragraphs or input fields. For these elements, you can use several attributes for visual styling. Let's look at how to change the text color:

color: This attribute is used to set the color of the text and any text decoration (such as underline, overline, etc.).
background-color: In addition to changing the text color, it is often required to change the background color as well. This attribute is used for such cases.
text-shadow: Sometimes, text design on the page requires a shadow. If the shadow color differs from the default, you can set it using the text-shadow attribute.
text-decoration-color: When you set a color for a text element using the color attribute, the color is applied to the accompanying text decoration. But if you want to set a different color for underlining, for example, you can use this attribute.
caret-color: In specific cases, you may need to style input fields (input, textarea) or elements with the contenteditable attribute. This attribute allows you to color the caret (the vertical cursor) that appears in the fields.

Block Elements

For block elements, such as div, you can flexibly set background and border colors regardless of the content inside the block.

background-color: Adds a fill to the entire area of the block element. This attribute will help if you're wondering how to change the background color in HTML for the entire page. Just add the attribute to the body styles and specify the desired color.
outline-color: Sets the color of the outline around the element if an outline style is specified with outline-style.
border-color: Allows you to set the color for the borders around the block element. To set the color for each side — top, bottom, right, and left — use the attributes border-top-color, border-bottom-color, border-right-color, and border-left-color respectively.

Other Elements

In addition to the HTML elements mentioned above, you can also work with the visual design of the page using technologies such as SVG, Canvas, or WebGL.

How to Change Text Color in CSS

The first step in using color in your markup is to determine how to specify it so that the browser understands how to color the element. The way you specify the color primarily depends on how specific or complex the color is. For instance, there’s a difference between using a basic color like blue or combining red, green, and blue in different proportions, potentially with transparency.

Key CSS Keywords

The simplest way to specify a color is by using a keyword, such as green or lightgrey. For example, to use black for text, you would write color: black;, and the browser will automatically understand the color to display.

You can find a complete list of reserved color keywords in the documentation.

RGB Model

RGB stands for Red, Green, and Blue. When you specify a color using the RGB model, you define the color by mixing three primary colors: red, green, and blue. Like in a regular color palette, mixing these colors in varying proportions creates new combinations and shades.

The three RGB values are integers between 0 and 255 or percentages from 0 to 100. For example, when you specify rgb(0, 0, 255), you will see the color blue in the browser.

Modern browsers also support an extended version of RGB, called RGBA, where you can specify color transparency. This is done by adding a fourth value for transparency in percentage form. For example, blue with 50% transparency would be written as rgba(0, 0, 255, 0.5).

HEX Representation

A HEX color is a hexadecimal representation of the RGB model. The color code consists of three pairs of hexadecimal digits, each representing the red, green, and blue components respectively. For example, specifying #00ff00 will display green.

If each color group contains identical characters (for example, #2211dff), you can use a shorthand representation — #21f.

HSL System

HSL stands for Hue, Saturation, and Lightness. In this system, the color is not determined by mixing the three parameters. Instead, each component is independent, which makes it easy to adjust the color's saturation or brightness while keeping the same hue. This system allows more control over the color's appearance without altering the basic tone.

CSS