Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Working with HTML Color – Text, Background, Borders
Contents
[
Hide
Show
]HTML colors are applied with CSS properties such as color, background-color, and border-color. You can use named colors, HEX, RGB, RGBA, HSL, or HSLA values depending on whether you need readability, precision, or transparency.
How to Use HTML Color
Design is not a central feature of HTML, so there is no special HTML color tag. However, you can change the color of any text using the following ways:
Using inline
styleattribute. Adding color to a web page is part of inline CSS styling. To set the text or background color in HTML, use thestyleattribute. You can apply thestyleattribute to HTML elements such as<body>,<p>,<table>,<div>,<h1>, or<h2>. Keep in mind that a style attribute overrides matching styles set in the HTML<style>tag or in an external style sheet.Using internal CSS. The internal CSS styling option is useful for applying properties to individual pages by placing styles in the
<style>element inside the<head>of an HTML document.Using color values. Traditional web color systems such as HEX, RGB, RGBA, HSL, and HSLA are optimized for digital screens and are widely used in HTML and CSS. CSS Color Module Level 4 also defines advanced color functions such as
lab(),lch(),oklab(),oklch(), andcolor(), but support can vary by browser and rendering environment.
The table below maps common HTML color tasks to the CSS properties used in the examples:
| HTML color task | CSS property | Notes |
|---|---|---|
| Change text color | color | Sets the foreground color of text and text decoration. |
| Change element background color | background-color | Sets the background behind an element’s content and padding. |
| Change the whole page background | background-color on <body> | Applies the background color to the document body. |
| Change border color | border-color with border-style | border-color is visible only when a border style such as solid is defined. |
How to Change Text Color in HTML
You can use the inline style attribute or the <style> element to change the text color and then set the value using the color property. The color property sets the foreground color value for an element’s text and text decoration. The color property accepts HTML color names, RGB, RGBA, HEX, HSL, or HSLA values.
Using Color Names
The color name depicts the specific name for the HTML color. The standardized named color set is often described as
147 HTML/CSS named colors, and you can use these names for your elements. For example, you can colorize text using the inline style attribute as shown in the following example:
1<html>
2 <body>
3 <h2 style="color:DarkCyan;">How to set text color using HTML color names?</h2>
4 <h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
5 <h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.</h4>
6 </body>
7</html>The same text colorization result can be achieved using internal CSS, as shown in the following example:
1<html>
2 <head>
3 <style>
4 h2 {
5 color:DarkCyan;
6 }
7 h3 {
8 color:DarkRed;
9 }
10 h4 {
11 color:DarkBlue;
12 }
13 </style>
14 </head>
15 <body>
16 <h2>How to set text color using HTML color names?</h2>
17 <h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
18 <h4>There are over 140 named colors to choose from that you can use.</h4>
19 </body>
20</html>The rendered HTML code looks as follows:
For more about named colors, see HTML Color Names. To change text, background, or border color in an HTML file programmatically, see the How-to Articles chapter and Change HTML Text Color in C#.
Using RGB, RGBA, or HEX Color Codes
To color HTML text, you can use RGB or HEX, which are the most commonly used color codes. An RGB(red, green, blue) value defines an HTML color by mixing red, green, and blue values. The syntax for an RGB color code is rgb(red, green, blue), where each parameter defines the color intensity with a value from 0 to 255.
RGBA (red, green, blue, alpha) color values are an extension of RGB color values with an alpha channel, which determines the opacity of the color. The alpha parameter is a number between 0.0, meaning “fully transparent,” and 1.0, meaning “fully opaque.”
A HEX color value works almost identically to an RGB value, but it looks different and has the syntax #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal values between 00 and ff. If you want to learn more about RGB, RGBA, and HEX codes, please visit the HTML Color Codes article.
Using RGB or HEX color codes is the most common way to add color to web pages. It is necessary to add a style attribute to the text element you want to color. In the example below, we use the <h2>, <h3>, and <h4> elements to apply the inline style attribute and color property with RGB, RGBA, and HEX codes:
1<html>
2 <body>
3 <h2 style="color:rgb(50,150,200);">How to use Text Color?</h2>
4 <h3 style="color:rgba(220,30,100,1);"> 1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
5 <h4 style="color:#1A8D7E"> 2. Specify the color using RGB, RGBA or HEX code.</h4>
6 </body>
7</html>The same result will be achieved using internal CSS, as shown in the following example:
1<html>
2 <head>
3 <style>
4 h2 {
5 color:rgb(50,150,200);
6 }
7 h3 {
8 color:rgba(220,30,100,1);
9 }
10 h4 {
11 color:#1A8D7E;
12 }
13 </style>
14 </head>
15 <body>
16 <h2>How to use Text Color?</h2>
17 <h3>1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
18 <h4>2. Specify the color using RGB, RGBA or HEX code.</h4>
19 </body>
20</html>The rendered HTML code is as follows:
Using HSL or HSLA Color Codes
HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates. Hue defines the basic color and measures it in degrees from 0 to 360 on the RGB color wheel. Saturation is the intensity or purity of a color, and it is defined in percentages from 0 (black and white) to 100 (vivid color). Lightness is the amount of brightness or light in color. It is defined in percentages from 0 (black) to 100 (white).
HSLA(hue, saturation, lightness, alpha) color values are an extension of HSL color values with an alpha channel that determines the opacity of the color. The HSLA color value is specified with hue, saturation, lightness, and alpha, where the alpha parameter specifies the opacity. The alpha parameter is a number between 0.0, meaning “fully transparent”, and 1.0, meaning “fully opaque”.
Using the same style attribute as before, replace the RGB/RGBA/HEX code or color name with an HSL or HSLA value in color property:
1<html>
2 <body>
3 <h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codes</h2>
4 <p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.</p>
5 <p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.</p>
6 </body>
7</html>As for the previous example, you can use the internal CSS (<style> element) and replace the RGB/RGBA/HEX code or color name with an HSL or HSLA value in the CSS selectors.
The rendered HTML code looks as follows:
Text Color Summary
- To change the text color, you can use either the inline
styleattribute or internal CSS. - To specify the desired color, you can use HTML color names or RGB, RGBA, HEX, HSL, or HSLA color codes.
Historically, the RGB model has been chosen as the primary model for web development because it is directly related to the operation of screens, which use red, green, and blue pixels to display colors. HTML and CSS strive for a simple, consistent model for defining colors that all browsers and devices will support. RGB and its derivatives (HEX, RGBA, HSL, HSLA) are intuitive and highly compatible with digital screens.
How to Change Background Color
Background Color for a Specific HTML Element
You can use the style attribute to specify the background color for the HTML element and then set the value using the background-color property. The background-color property accepts color names, RGB, RGBA, HEX, HSL, or HSLA values. Here, we want to show how the same color, “YellowGreen,” is set using different color formats and different degrees of transparency. Otherwise, it would be better to use internal CSS to specify a single color for all elements of a certain type.
Determine which element you want to change the background color for. If it is a paragraph, look for the <p> opening tag. It can also be an <h1>…<h6>, <div>, or <table> tag. In this example, we are adding a background color to the <h2> elements:
1<html>
2 <body>
3 <p>The color name is "YellowGreen":</p>
4 <h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
5 <h2 style="background-color:#9ACD32;">#9ACD32</h2>
6 <h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
7
8 <p>RGBA values of name "YellowGreen" color, with different transparency:</p>
9 <h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154, 205, 50, 0.2)</h2>
10 <h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154, 205, 50, 0.5)</h2>
11 <h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154, 205, 50, 0.8)</h2>
12
13 <p>HSLA values of name "YellowGreen" color, with different transparency:</p>
14 <h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80, 61%, 50%, 0.2)</h2>
15 <h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80, 61%, 50%, 0.5)</h2>
16 <h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80, 61%, 50%, 0.8)</h2>
17 </body>
18</html>The rendered HTML code looks as follows:
To ensure your chosen colors provide sufficient contrast and comply with accessibility standards, test color combinations before using them. Learn more about color accessibility and contrast ratios in Color Contrast Accessibility.
For quick testing a web page for color contrast accessibility and WCAG-related issues, try the free online tools Aspose.HTML Contrast Checker and Color Contrast Accessibility.
Background Color for the Entire Web Page
It’s important to note that in the example above, the background-color property provides a color for the background of the text but not for the whole document. If you wish to change the HTML color for the whole page, you should use the background-color property of the style attribute in the opening tag of the <body> section:
1<html>
2 <body style="background-color:#e0e0e0">
3 <h2 style="background-color:YellowGreen;">YellowGreen</h2>
4 <h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
5 <h2 style="background-color:rgba(154, 205, 50, 1.0);">rgba(154, 205, 50, 1.0)</h2>
6 <h2 style="background-color:#9ACD32;">#9ACD32</h2>
7 <h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
8 <h2 style="background-color:hsla(80, 61%, 50%, 1.0);">hsla(80, 61%, 50%, 1.0)</h2>
9 </body>
10</html>The image renders the HTML code for setting the background color for the text (YellowGreen color name is specified in different color codes) and the whole web page.
One more example to achieve the effect of colorizing the background for the whole web page by using the style attribute with the background-color property in the opening tag of the <body> section:
1<html>
2 <body style="background-color:#ffe0e0;">
3 <h2>How to set Background Color for the whole web page?</h2>
4 <p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
5 </body>
6</html>You can also use internal CSS to set the background color for the entire page:
1<html>
2 <head>
3 <style>
4 body {
5 background-color:#ffe0e0
6 }
7 </style>
8 </head>
9 <body>
10 <h2>How to set Background Color for the whole web page?</h2>
11 <p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
12 </body>
13</html>
Border Color
You can use the style attribute with the border-style and border-color properties to specify the border color for the text elements. CSS border-color property defines the color of the four borders of an element. The border-color property will only work when the border-style property is defined first, which is used to set the borders. This property will not work alone. If this property is not set, it inherits the element’s color. The border-color property accepts color names, RGB, RGBA, HEX, HSL, or HSLA values.
1<html>
2 <body>
3 <p> The border-color property only works when the border-style property is defined first, which is used to set the borders.</p>
4 <h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?</h2>
5 <p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.</p>
6 <h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?</h2>
7 </body>
8</html>
Modern CSS Color Features
Modern CSS introduces powerful new ways to define and manipulate colors, going far beyond traditional HEX, RGB, and HSL formats. These features are part of the CSS Color Module Level 4 and newer specifications.
New Color Spaces
Modern CSS defines additional color spaces that allow more precise and perceptually uniform color definitions:
- lab() – defines colors based on human vision rather than device output. Example:
color: lab(50 20 -30); - lch() – similar to Lab, but uses lightness, chroma, and hue values, which are easier to adjust intuitively. Example:
color: lch(60 70 40); - oklab() / oklch() – improved Lab/LCH-style color spaces that provide more perceptual consistency. Example:
color: oklch(70% 0.15 250);
Color Mixing and Adjustments
You can now mix and adjust colors directly in CSS:
color-mix()– blends two colors in a specific color space. Example:background-color: color-mix(in hsl, white 30%, green 70%);color-contrast()(experimental) – helps choose the most legible color based on contrast requirements.
Browser Support
Because support for newer color functions can vary by browser and rendering environment, developers should provide a simple fallback color before an advanced color value. This ensures that users of older environments still see an acceptable color. In the following example, #ff6600 is used first, and browsers that support CSS Color Level 4 can use the later oklch() value:
1color: #ff6600;
2color: oklch(70% 0.18 40);FAQ
What is the fastest way to change text color in HTML?
To change text color, use the `style` attribute with the `color` property:1<p style="color:red;">Text</p>See examples above for RGB, HEX, and HSL alternatives.
What is the difference between RGB and HEX?
RGB uses decimal values from 0 to 255 for each color channel, such as rgb(255, 0, 0) for red. HEX uses base-16 notation, such as #FF0000 for the same color. Both represent the same colors, but HEX is more compact, while RGB is easier to calculate or adjust in code.
Which HTML color format is best?
For most static designs, HEX is the most common and concise choice. Use RGB or RGBA when you need channel-based values or transparency. Use HSL or HSLA when adjusting hue, saturation, or lightness is easier than editing RGB channels.
What are web-safe colors?
Web-safe colors are a historical set of 216 colors that used HEX values with combinations of 00, 33, 66, 99, CC, and FF. Modern displays support millions of colors, so web-safe colors are less important today, but the term still appears in older web design material.
Can I use transparent colors in HTML?
Yes. Use RGBA or HSLA color formats with an alpha channel. The alpha value ranges from 0.0 for fully transparent to 1.0 for fully opaque:
1<div style="background-color:rgba(255, 0, 0, 0.5);">50% transparent red</div>
2<div style="background-color:hsla(0, 100%, 50%, 0.3);">30% transparent red</div>Why is my border color not showing?
The border-color property only has a visible effect when a border style is defined:
1<!-- Wrong: no border appears -->
2<div style="border-color:red;">Text</div>
3
4<!-- Correct: border appears -->
5<div style="border-style:solid; border-color:red;">Text</div>If you do not specify border-color, the border inherits the element’s text color.
What is the difference between color and background-color?
The color property sets the foreground color of text and text decoration. The background-color property changes the background color behind the content and padding of an element.
How do I choose colors that work well together?
Use common color harmony principles such as complementary, analogous, or triadic colors. A Color Wheel Picker can help you test combinations before applying them to text, backgrounds, and borders.
Related Articles
- HTML Color Names – learn named colors and when to choose numeric color values instead.
- HTML Color Codes – compare HEX, RGB, RGBA, HSL, and HSLA color formats.
- Change Text Color in HTML – update text color in HTML documents using C#.
- Change Background Color in HTML – set document and element background colors.
- Change Border Color in HTML – change border colors in HTML files.
- Color Wheel Picker – create HEX color palettes and experiment with color harmonies online.