Do you think IIT Guwahati certified course can help you in your career?
No
Introduction
Using colour is one of the most crucial aspects of website design. Your simple website can attract many people with the help of colours. Unless you have a thorough understanding of colour theory, selecting the appropriate shades for a website can be difficult and time-consuming. This article will cover various HTMLcolour names and colour codes. We will also see how to choose colour schemes that look good and generate positive responses on your web pages.
HTML Colors
HTML serves as the backbone of your website, and colours are a vital component of any website. Compared to a black-and-white website, a colourful website is more visually appealing.
See the following images and select the one with an attractive visual appearance.
Image A:
Image B:
Most people will select image B. Therefore, we can say that colours are vital components of any website or application.
HTML allows us to apply html colors using the <body> tag. The following attributes of the <body> tag can be used to determine different colours:
Background Color: The bgcolor option determines the background color of the website page’s.
Font Color: The colour of the body text is determined by the text.
Linked Text Color: One can also apply colour effects to the linked text.
alink: For selected or active links, alink assigns a colour.
vlink: For linked text that has already been clicked, vlink sets a colour.
link: Setting a colour for linked text can be done using the link.
HTML Color Coding
There are mainly three different ways to set html colours to your application or webpage.
Using html color names: You can specify the colour's name explicitly.
For example,
<body style="background-color: red;">
<body style="background-color: blue;">
<font color="blue">The example of blue text.</font>
Using hex codes: Numbers in hex a six-digit code that indicates the proportion of red, green, and blue in a given colour.
For example,
background-color: #FF0000; // Red Colour
background-color: #00FF00; // Green Colour
background-color: #0000FF; // Blue Colour
Using percentage values: The RGB() property is used to specify the colour percentage.
A Color HEX Code, also known as a hexadecimal color code, is a six-character code that represents a specific color in digital design and web development. It consists of a combination of numbers and letters (0-9 and A-F), denoting the red, green, and blue components of the color. For instance, #FF5733 represents a shade of orange. The first two characters indicate the intensity of red, the next two for green, and the last two for blue. This system allows for a wide range of colors to be precisely defined for use in digital applications.
HTML Color Names
In HTML 5, you can specify 147 different html color names and hexadecimal or hex code values, of which 17 are considered standard colours. Colour
Standard HTML Color Names
The following 17 colours are standard html color names with hexadecimal code.
Colour Name
Code
Colour Name
Code
Aqua
#00FFFF
Olive
#808000
Black
#000000
Orange
#FFA500
Blue
#0000FF
Purple
#800080
Fuchsia
#FF00FF
Red
#FF0000
Grey
#808080
Silver
#C0C0C0
Green
#008000
Teal
#008080
Lime
#00FF00
White
#FFFFFF
Maroon
#800000
Yellow
#FFFF00
Navy
#000080
Hot Pink
#FF69B4
LemonChiffon
#FFFACD
FireBrick
#B22222
AliceBlue
#F0F8FF
Coral
#FF7F50
140 more html color names are non-standard but supported by web browsers.
Example
Here is an example of applying the background colour of a webpage using the colour name and hex code.
<!DOCTYPE html>
<html>
<head>
<title>HTML colour Names</title>
</head>
<body text = "#FF0000" bgcolor = "silver">
<p>Coding Ninjas Html Color names example</p>
<table bgcolor = "#808000">
<tr>
<td>
<font color = "white">Example of white text with olive background.</font>
</td>
</tr>
</table>
<table bgcolor = "purple">
<tr>
<td>
<font color = "white">Example of white text with purple background.</font>
</td>
</tr>
</table>
</body>
</html>
Output:
Limitations of Using HTML Color Names
We generally use six hex digits or a triplet of three 8-bit numbers to represent a colour in HTML. As we know, 1 hex digit maps to 4 binary digits (nibble). So, six hex digits will be equivalent to 24 binary bits (6 hex digits *4). That means we can have 224 = 16 million (approximately) colours, but we only have 147 instead of 16 million. It results in a limitation on using colour names in HTML.
The limitations of using a colour name in HTML include the fact that not all browsers display them equally. For example, you might think that "purple" is a pure hue somewhere between red and blue, but when you use the colour name, it simply refers to a dark magenta. You must use the hexadecimal values of the colours or the rgb colour property if you want to define them in a way that is browser-compatible.
Additionally, if you want to add transparency to your colour, you can’t do it using the name of the colour. For example, sometimes the colour pink and purple are quite confusing. Since the hue value is the same for both. In such cases, the saturation value is used, which is impossible when you use colour names.
Frequently Asked Questions
What are the 16 HTML color names?
The 16 HTML color names include black, white, gray, silver, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, purple, and fuchsia.
What is a 6 digit color code?
A 6-digit color code, also known as a HEX code, represents a specific color in web design. It consists of six characters, combining numbers (0-9) and letters (A-F).
What color is 00FF00 code?
The color code 00FF00 corresponds to pure green in hexadecimal notation. This code signifies maximum intensity of green, with no red or blue components.
How do I remember the color name in HTML?
In HTML, you can remember color names by using predefined color names such as red, blue, or green. These names represent specific colors and can be easily recalled when setting the color attribute for HTML elements.
Conclusion
In this article, we covered the HTML color names and their colour code. We covered seventeen standard html color names and how to implement them using hexadecimal codes.
We hope this blog has helped you. We recommend you visit our articles on different topics of HTML, such as