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):

Источник

HTML Colors

This article covers how to use colors in the website using HTML in simple and easy way. Colors play an important role in creating websites to look and feel good. There is no individual tag built-in HTML; instead, it makes use of style attribute or the color property. Precisely, the colors are embedded in the HTML elements using Cascading Style Sheet (CSS). Colors give an elegant look to the web page. Adding colors to the web page includes setting background colors, tables, paragraphs, etc.

Web development, programming languages, Software testing & others

How to Set a Background Color in HTML?

Making background color brighten makes the website to look pretty and bolder. It is done by using colors, Hex color codes. RGB and RGBA color values (Alpha value 0 to 1).

Hex color is applied directly to the Html code using the Style attribute inside the body element of the Html. Hex is a combination of both numbers and letters. Below is the example illustrating Background color on the web page.

      
This page is a demo
  

Code Snippets:

To add background color, you can use the bgcolor attribute to display < body bgcolor=’ ‘>. It is compatible with all browsers except in HTML 5.

Color Name
 
Hexadecimal
 
RGB Value

How to Apply Color to Text in HTML?

Applying color to the HTML text is quite easy; we can add/ change the color of the text by applying three ways, namely Hex color, HSL values and color names. The following are the three different techniques to apply color to the corresponding web pages.

1. Color Names

This is quite simple by using English color names when the application is straight forward these color names are used. Specifying color names are direct methods, and W3C has announced 16 basic colors (Black, yellow, red, Maroon, Grey, Lime, Green, Olive, Silver, Aqua, Blue, Navy, White, Purple, Fuchsia, Teal)

2. HSL

Hue saturation and lightness color values. Hue is defined in 0 to 360-degree, saturation and lightness from 0 to 100 %.

3. Hex Color

To get a precise result six-digit hexadecimal number is applied. To elaborate, the first two digits denote Red, the next two denote Green, the other two denote Blue value and preceded by ‘#’.

The following example explains the different ways of applying colors to the documents.

There are different methods to do text color as HTML has a lot of customizable applications.

• Applying style section
• Creating an individual CSS style sheet
• Wrapping the text

How to Apply Text Color using Section?

Let us see various methods for using HTML colors:

1. Wrapping Using HTML Colors

Below code changes the color of the text in the paragraph with simple HTML codes. There are 140 colored names to color the websites.

Below code demonstrates how to apply text color using section.

       
changing text color
 
This content is very clear
 
pink paragraph text
  

2. Using HEXCOLOR

Again, this example takes the style section to declare hex color followed by a ‘#’ symbol.

       
changing text color
 
hello world
 
Hexa paragraph text
  

3. Using RGB Color

The red, green, blue uses 8 bits each, and their value varies from 0 to 255, which produces various colors. The below example picks RGB color by their values.

      
Blue paragraph text
  

4. Method Using the Style Sheet

      @import url("https://cdn.educba.com/examples/css/style.css"); p 
The styles for Html documents
 
Each tag to be styled with colors.
  

5. Creating Individual CSS Style

      
CSS style sheet
 
Multiple HTMl Document.
 
Hello world!
  

External CSS file lcolor.css:

How to Set Border Color in HTML?

    
 
Chicago
 
new york
 
Texas
 
California
 
 
  

Now let’s see setting two border-color separately. The below code uses table attribute with their elements.

    
 
 
Samsung
 
Nokia
 
 
 
Apple Iphone
 
Xiami Redmi
 
 
  

It is used to group all the elements and helps in view of a web page at its particular position. In the below code, we have used two one for a paragraph and the other to implement style attribute by setting border pixels and thickness is increased by giving out the width, and we have added padding to demonstrate them to the left.

       
 
Nature is beautiful
 
 
div with a border color.
  

Example: This explains how to set the color for padding and margin using class and list tags.

How to Specify Color Using Values in HTML?

The basic color values vary from 0 to 255 for red, blue, green. The color value is important in giving out lightness.

The below table shows sample values for the colors.

Example: The below example shows different color values in their background settings.

    
Data Mining techniques is to understand a patterns
 
Classification
 
Prediction
 
Regression
 
Classification, Prediction techniques
 
HTML colors
 
Table colors
  

How to use RGB Color Values in HTML?

RGB denotes Red, Green blue colors directly and uses the RGB function. It takes those three values as parameters and declared them as integers sometimes in percentage. Whichever color we want, its intensity is given a higher value 255 as an integer value falls between o to 255. For instance, to have a blue color, it is preferred to denote (0,0,255). here the first two values are marked as 0,0, and the last value is 255 for blue.

Example: RGB color

   div  
Norway the most beautiful place it’s a Scandinavian Country.
 
It is the most expensive country in the world, Oslo is the capital of this green city.
 
  

How to Specify the Lightness of Colors in HTML?

The lightness of color is defined by the brightness we prefer; it is measured in percentage. Most web designers wish to use lightness than RGB, which can be adjusted as per the requirements. Here a black set the brightness to 0% white set to 100%. It is specified using function hsl().

   div  
Norway the most beautiful place its an Scandinavian Country.
 
It is the most expensive country in the world, Oslo is the capital of this green city.
 
  

You can try with different values for color in the above example.

Conclusion – HTML Colors

Therefore, to conclude, we have seen that this has different properties. In earlier days, web development has many ways to specify colors for their website, and nowadays, the most popular colorways are RGB and Hex color codes (RGB is well-known). There are different applications where colors are implemented, like a sliding scale, color palette, etc.

Recommended Articles

This is a guide to HTML Colors. Here we discuss the introduction, how to set a background colour in HTML, how to apply colour to text in HTML, etc. You can also go through our other suggested articles to learn more –

89+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

97+ Hours of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

HTML & CSS Course Bundle — 33 Courses in 1 | 9 Mock Tests
125+ Hours of HD Videos
33 Courses
9 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник

HTML Colors

Colors are an essential part of any website’s design. They can be used to set the mood, highlight important content, and make the overall user experience more visually appealing. This tutorial will teach you how to use colors in HTML, specify colors using different methods, and apply colors to different tags on a web page.

Specifying Colors in HTML

There are three main ways to specify colors in HTML: using a named color, a hexadecimal value, or an RGB value. Let’s take a closer look at each of these methods.

Named Colors

The most common method is to use a named color, which refers to a predefined color value with a name. There are 147 named colors in HTML, including basic colors like » red » and » blue ,» as well as more obscure colors like » papayawhip » and » slategray .» To use a named color, specify the name of the color as the value of the relevant style property.

Here is a list of named colors with their representation that HTML and CSS recognize:

Hexadecimal Colors

Another way to specify colors in HTML is to use a hexadecimal code, a six-digit code representing a specific color. Hexadecimal codes consist of three pairs of digits, each representing a value for the colors red, green, and blue (RGB). For example, the hexadecimal code for the color red is #FF0000 , with FF representing the maximum value for red , and 00 representing the minimum value for green and blue . To use a hexadecimal code, specify the code as the value of the relevant style property, preceded by a # symbol.

RGB Colors

In addition to named and hexadecimal codes, colors can be specified in HTML using the RGB model, representing colors as combinations of red, green, and blue values. The RGB model is particularly useful for specifying colors with greater precision, as it allows you to specify a value for each color on a scale from 0 to 255 . The rgb() function defines the RGB model, which takes three arguments representing red, green, and blue values.

RGBA Colors

The rgba() function is similar to the rgb() function except that it includes an additional argument for alpha transparency. The alpha value specifies the degree of transparency of the color, with 0 being fully transparent and 1 being fully opaque.

This text is red with 50% transparency.
 

Источник