Home HTML CSS JavaScript jQuery ReactJS NodeJS About us Blogs Faqs

HTML Color

Colors are used to make the website more visually appealing. The following are the several styles you can use to generate new colours by combining different colours.

1. Hexadecimal style

In this style, the colour is defined as a six-digit hexadecimal number (from 0 to F). It is symbolised by the symbol '#'. The first two numerals represent red, the next two green, and the final two blue.

Syntax

2. RGB style [red green blue]

We must provide three values showing the quantity of red, green, and blue colours necessary in the blended colour. Each colour has a value between 0 and 255.

Note : It should be noted that rgba(0, 0, 0) is black and rgb(255, 255, 255) is white.

Syntax

3. RGBA style [red green blue alpha]

With this style, we may make the colour translucent to our liking. The value of alpha reflects the degree of transparency. Green, blue, and red have a range of 0 to 255, whereas alpha has a range of 0 to 1.

Syntax

4. HSL colours

'H' stands for hue, 'S' represents saturation, and 'L' stands for lightness. The HSL colour values are as follows:

  • Hue refers to the colour of the picture. It has a scale of 0 to 360. 0 represents red, 120 represents green, and 240 represents blue.
  • The intensity/purity of the colour is referred to as saturation. A shade of grey is represented by 0%, whereas full colour is represented by 100%. When a colour is totally saturated, it is regarded to be in its purest/truest form.
  • The brightness of the colour space is defined as lightness. The percentage for black is 0%, whereas the percentage for white is 100%.

Syntax

Example

Preview

FAQs

You can create a color picker using HTML by using the <input> element with the type="color" attribute. This will display a color picker widget that allows users to select a color. When the user selects a color, the hex value of the color will be stored in the input field named "color-picker". You can then use this value in your CSS or JavaScript code.

There are several best practices for choosing and using colors in web design.

  1. Use brand colors as a basis for your color palette. If you don't have established brand colors, you can take inspiration from nature using tools like Adobe Extract Theme.
  2. When in doubt, choose a very light color for the background and a very dark color for the text itself.
  3. Limit the number of primary colors to avoid confusion for users. It's also essential to define rules for using individual colors consistently throughout the user interface and provide design guidelines to the design team.
  4. Consider color psychology and the specific product and market's color meaning when choosing colors.
  5. Black text on a white background can cause eye strain, and it's recommended to use dark gray instead of pure black.

To set the background color of a web page using HTML, you can use the style attribute on the <body> tag. (You will learn about this in subsequent tutorials)