We can create the structure of a website and its headings, paragraphs, and links in HTML. When creating a varied and well-structured website, you have to consider other aspects besides transparency—colors, for example.
We have already written an introduction to web development, so you should look through that article if you are interested in the basics of HTML.
In this post, we’re going to look at how you can define colors and shades in the HTML color codes, with a lot of sample illustrations.
HTML color codes’ names
There are millions of shades of color that can be displayed by modern browsers. It would be impossible to name and account for all of them, so in the world of IT, we use codes to define colors and shades.
HTML supports 140 standard color names, but you can define any other shade on your website as well, using color codes. Pre-coded colors can be defined by their specific color names (like aqua, black, yellowgreen, hotpink, etc.), so we don’t need to search for any specific codes to define exactly those colors.
There are multiple coding systems for colors, and these codes contain the ratio of different components (base colors) and the value of parameters (e.g., transparency or saturation). In this article, we’ll show you the hexadecimal system in detail and we will only mention the other options.
Color pickers and mixing colors
We can find color codes using color picker tools.
Here are a few examples of color pickers:
Every color that our eyes can detect is a mixture of different ratios of base colors. In IT, different shades are displayed by mixing the base colors red, green, and blue (RGB).
(In color theory, the base colors are red, yellow and blue, but because of some features of computer screens, we have to use other colors in IT.)
Hexadecimal color code
Among all options for color codes, hexadecimal is the most concise, and therefore, the most widely used form when editing HTML code.
The color code starts with a # character, followed by a series of six characters. We can define the exact color we want to use with numbers (0-9) and letters (a-f). The first two characters define the value of red (RR), the second set of two defines green (GG), and the third set of two defines blue (BB).
For example: #eb4034
Different shades of grey contain the same amount of all components.
Each character of the color black is 0
The color white contains the maximal value of all components
Shorter hexadecimal values
There are times when we can use even shorter codes; for colors that have the same characters for each component, we can use only three characters and get the same color.
The code #000 defines black, just like #000000, while #0ff creates the same turquoise color as #00ffff.
The shorter version of #cc2244 is #c24
Where does the HTML color code go?
We can define colors in the form of attributes within the tag the color applies to. We can define the background color of the website within the <body> tag, and the color of the main heading should be within the <h1> tag, etc.
Within the <body> tag, we can define the color of the text with the ‘text’ attribute, and the color of the background with the ‘bgcolor’ attribute. We can use the ‘color’ attribute within the <font> tag to change the color.
In HTML, we can use the <style> tag in all other elements to overwrite any globally defined information (e.g., format, style, color) to display something differently in a specific location.
Other color-coding options
We can define the ratio of red, green and blue in a scale from 0 to 255, not just in a hexadecimal form. To do this, we have to put the code behind the text, bgcolor, etc. attributes in this form: rgb(192,192,192).
When using RGBA codes, in addition to the value of base colors, you also have an other component that refers to transparency called the Alpha Channel. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). This is how a color looks in RGBA code: rgba(255, 99, 71, 0.5)
In HTML, we can define colors using hue, saturation, and lightness (HSL). The value of a hue is expressed in degrees based on its position on the color wheel.
Saturation is a percentage value, 0% defines a shade of grey, and 100% defines the full color. Lightness is also a percentage value, with 0% being black and 100% being white. HSL color codes look like this:
hsl(36, 100%, 50%)
An alpha value can also be added, which refers to the transparency of the color.
You should try different color pickers and color-coding forms to find the one that is best for a project and that you can work with most efficiently. With a bit of practice, you can easily define the prettiest colors on your website.
In our Programming Tutorials series you’ll find useful materials which will help you improve your programming skills and speed up the learning process.
Would you like to learn how to code, online? Come and try our first 25 lessons for free at the CodeBerry Programming School.