color

The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color .

Try it

For an overview of using color in HTML, see Applying color to HTML elements using CSS.

Syntax

/* Keyword values */ color: currentcolor; /* values */ color: red; color: orange; color: tan; color: rebeccapurple; /* values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /* values */ color: hwb(90 10% 10%); color: hwb(90 10% 10% / 0.5); color: hwb(90deg 10% 10%); color: hwb(1.5708rad 60% 0%); color: hwb(0.25turn 0% 40% / 50%); /* Global values */ color: inherit; color: initial; color: revert; color: revert-layer; color: unset; 

The color property is specified as a single value.

Note that the value must be a uniform color . It can’t be a , which is actually a type of .

Values

Sets the color of the textual and decorative parts of the element.

Sets the color to the element’s color property value. However, if set as the value of color , currentcolor is treated as inherit .

Accessibility concerns

It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Initial value	canvastext
Applies to	all elements and text. It also applies to ::first-letter and ::first-line .
Inherited	yes
Computed value	computed color
Animation type	by computed value type

Formal syntax

Examples

Making text red

The following are all ways to make a paragraph’s text red:

p  color: red; > p  color: #f00; > p  color: #ff0000; > p  color: rgb(255, 0, 0); > p  color: rgb(100%, 0%, 0%); > p  color: hsl(0, 100%, 50%); > /* 50% translucent */ p  color: #ff000080; > p  color: rgba(255, 0, 0, 0.5); > p  color: hsla(0, 100%, 50%, 0.5); > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Ut wisi enim.

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

Hello World

Hello World

Hello World

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three elements have their background color set with RGB, HEX, and HSL values:

The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

Источник

What are HTML Color Codes

HTML permits web developers to use different colors on web pages to make them attractive. Colors are an essential tool to create a better look and feel for our application. The web pages having interactive colors are the most likely ones and easily grab the attention of the user. It also helps the users to communicate with the application and understand the action. Moreover, HTML offers various methods to apply color to the content.

This guide will demonstrate:

What are HTML Color Codes?

HTML Color Codes are the identifiers to apply colors on the web page. The common HTML color codes are keyboard names, “Hexadecimal Code”, “RGB(red, green, blue)”, and “HSL (Hue, Saturation, Lightness)”.

How to Apply Colors in HTML?

In HTML, there are three methods to apply colors to a web page using:

We will discuss each of them with the help of implementation. Firstly, it is required to create an HTML file.

Example: Applying Colors in HTML Using Color Names
In the HTML file, add a div inside the body tag. Set the div class name as “container”. Create two elements for the heading and paragraph inside the div:

The added HTML elements will look like this:

Let’s make the web page more appealing by applying some styles. To do so, include the tag in the HTML file head section. Inside the style tag, apply CSS styles for the div like this:

.container {
background- color : thistle;
margin: auto;
text- align : center;
width : 50 %;
height : 90 %;
}
< / style >

The above-provided code contains the CSS properties for the div class, which are listed below:

• “.container” represents the class of div.
• “background-color” property is utilized for applying the background color of div.
• “margin: auto” applies margin from all sides of the div.
• “text-align: center” aligns text in the center of the div.
• “height” and “width” can be assigned according to user preferences.

As we can see, the “background-color” property of the div is now changed to “thistle” from white. This is how we apply colors to our web pages by simply using color names. However, to take advantage of different color shades, there are three methods to apply colors using color codes.

Method 1: Applying Colors in HTML Using Hex Code Values

“Hex Code Values” are the Hexadecimal values that can be used for color application in HTML.

Syntax
You can write color code in this format:

In the above-given syntax, “rr” is for red, “gg” is for green, and “bb” is for blue.

Have a look at the table below representing the color and their hexadecimal values:

Color	Hexadecimal Code Value
Red	#ff0000
Blue	#0000ff
Green	#00ff00
White	#ffffff
Black	#000000

Example
Let’s continue the same example and change the color of the div to red using a hexadecimal code value. To do so, change the background-color value from “thistle” to “#ff0000” as follows:

It can be observed that the background color of the div is successfully changed to red:

Method 2: Applying Colors in HTML Using RGB Code

“RGB” is the color scheme or model that uses primary colors red, green, and blue of light. Different values of these colors can be added to generate multiple colors.

Syntax
The RGB scheme works according to the given formula:

Let’s have a look at some colors with their RGB values:

Colors	RGB Color Code
Red	rgb(255,0,0)
Green	rgb(0,255,0)
Blue	rgb(0,0,255)
White	rgb(255,255,255)
Blue	rgb(0,0,0)

Example
Here is the demonstration of changing the background color of our div to “yellow” by applying RGB code. The “background-color” is set as “rgb(0,0,255)”, which is the yellow RGB color code:

After assigning the rgb(255,255,0) value to the background-color property, check the results below:

Method 3: Applying Colors in HTML Using HSL

In HTML, the colors can also be defined using “HSL” Hue, Saturation, and Lightness. For this purpose, it’s necessary to utilize the HSL color code method.

Syntax
The format of hsl() color method is cited below:

In the RGB color wheel, each color denotes an angle and percentage value for the below-listed factors:

• Hue: It is used to represent the degree, 0 to 360 on the RGB color wheel.
• Saturation: It is the percentage value, where 0% means a shade of gray, and 100% is the full color.
• Lightness: It is the percentage value, where 0% indicates black, and 100% is for white.

Example
Let’s change the above-mentioned “div” color to a shade of green having a hue “of 106” degrees, saturation “of 73%” and lightness “of 58%”:

The result is shown below:

Here you go! You have learned the three methods to apply colors in HTML.

Conclusion

HTML Color Codes are identifiers to apply different colors. Apart from using only the color name, HTML permits us to utilize three methods: Hex code values, RGB colors, and HSL. You can utilize these colors on any HTML element by setting the values of these codes. This write-up demonstrated the methods to apply colors in HTML.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник