How to use HTML colors for backgrounds, text and borders
HTML colors can be applied to backgrounds, text and borders in an HTML document. Selecting the right colour can improve both the design and readability of a website. There are three different methods available for defining colours.
What are HTML colors?
HTML colors are used to define the colour values of certain elements in an HTML document. Using simple settings in the body area via the style tag, you can customise the HTML background, borders and texts to your liking.
- Loading 3x faster for happier customers
- Rock-solid 99.99% uptime and advanced protection
- Only at IONOS: up to 500 GB included
What methods are available to specify HTML colors?
There are three different methods for defining HTML colors. In the following sections, we’ll take a look at what distinguishes these three variants.
Colour names
A total of 140 colour names are supported by all modern browsers. These names are stored within the code. In addition to standard values such as ‘blue’, ‘grey’ and ‘red’, more specific values such as ‘Chocolate’, ‘Cornsilk’ and ‘DarkSeaGreen’ are also available.
In this article by w3schools, you’ll find a list of all available HTML color names.
Hex color codes
Hex color codes are made up of a six-digit hexadecimal number preceded by a hash symbol (#). The digits range from 0 to 9, and the letters from A to F. These numbers represent the levels of red, green, and blue in pairs, with 00 being the lowest value and FF the highest.
For instance, the colour blue is represented by the hex code #0000FF, while dark pink (DeepPink) has the hex value #FF1493. At the ends of the spectrum, you’ll find black (#000000) and white (#FFFFFF).
RGB values
In addition to hex color codes, RGB color values can also be used for HTML color markup. These are also defined by their proportions of red, green and blue, whereby the intensity of a component can be between 0 and 255. For example, the colour blue is defined with the code rgb(0, 0, 255), cyan with rgb(0, 255, 255) and deep pink with rgb(255, 20, 147).
How to define HTML colors (including syntax and examples)
Now, let’s take a look at the syntax and functionality for defining colours in HTML with some practical examples.
Changing the background colour
If you want to change the colours of your background in HTML, you need the style attribute and the CSS inline property background-color. The syntax is as follows:
<element style="background-color: color value;">In the following example, we’re going to use colour names to set the background colour for a heading and two paragraph elements. We’re going to set the <h2> heading to ‘SteelBlue’. Next, we’ll change the background colour of the first paragraph element to ‘SpringGreen’ and the second one to ‘Yellow’:
<body>
<h2 style="background-color: SteelBlue;">
HTML background colours
</h2>
<p style="background-color: SpringGreen; padding: 5px;">
Here’s a paragraph and its background colour is <b>SpringGreen</b>.
</p>
<p style="background-color: Yellow;">
This is another paragraph and its background colour is <b>yellow</b>.
</p>
</body>
Specifying text colours
A similar approach is used for changing the colour of text. However, in this case, you need the color property. The syntax is as follows:
<element style="color: color value;">In this example, we’re going to use hex values, setting OrangeRed (#FF4500) as the font colour for the headline. For the first section, we’ll use MidnightBlue (#191970) and for the second one, Indigo (#4B0082):
<body>
<h2 style="color: #FF4500;">
This headline is Orange Red
</h2>
<p style="color: #191970;">
The font colour in this paragraph is <b>Midnight Blue</b>. </p>
<p style="color: #4B0082;">
The font colour in this second paragraph is <b>Indigo</b>.</p>
</body>
Specifying border colours
You can also customise borders in HTML using colours. In addition to the border property, you can use other parameters to define the structure of the border. The syntax looks like this:
<element style="border: additional parameters color value;">In the example below, we’ll use the third method for defining colours in HTML: RGB values. We’re going to assign the border of our headline the value rgb(178, 34, 34) (FireBrick). The two paragraphs will be bordered with rgb(32, 178, 170) (LightSeaGreen) and rgb(205, 133, 63) (Peru).
<body>
<h2 style="border: 2.5px solid rgb(178, 34, 34);">
The headline border is fire red</h2>
<p style="border: 2.5px dashed rgb(32, 178, 170); padding: 5px;">
This border is <b>light green</b>.
</p>
<p style="border: 2.5px dotted rgb(205, 133, 63); padding: 5px;">
This border uses the colour value <b>Peru</b>.
</p>
</body>
- Free WordPress with .co.uk
- Free website protection with one Wildcard SSL
- Free Domain Connect for easy DNS setup