Ultimate Guide to HTML Colors

Using colors that is "right" for your website can have a dramatic impact on how your audience understand your content.


HTML Color Essentials

It is essential to give the user a good user experience. There are many things you should focus on, one of them is how you use colors on your website. We don't have to struggle with black and white TVs anymore. Users expect more and more and we can apply colors to everything we want.

Texts, borders, backgrounds, shadows – in HTML they all can have whatever color you decide. Websites today are better than ever and you should learn how to brighten up your website using some HTML background color magic. You may use HTML color names, Hex color codes, RGB and HSL values. Color Hue is another word for color.



HTML Color Essentials
HTML Color Essentials



HTML Background Color Using Color Names

There are more than 1100 different color names available. But you should remember that most browsers only support 140 different color names. Using Color Names is one of the most convenient ways to set background color because it is easy to understand what color you have chosen. Color Name keywords are case-insensitive identifiers that represent a specific color, such as black/Black or blueviolet/BlueViolet.


You can find information about the 140 different supported color names here: https://www.developermate.com/HTML/color-names


<body style="background-color:BlueViolet;">
</body>

HTML Background Color Using Hex Color Codes

Hexadecimal colors is specified with: #RRGGBB. RR (red), GG (green) and BB (blue) are defined as hexadecimal integers between 00 and FF. Each parameter RR-GG-BB defines the intensity of the color. The hexadecimal color values are supported by all browsers.


<body style="background-color:#8A2BE2;"> <!--Color BlueViolet-->
</body>



HTML Color Map
HTML Color Map



HTML Background Color Using RGB Color Values

RGB colors are specified with: rgb(red, green, blue). Be sure to enclose the parameter in parentheses and prefix it with a lowercase 'rgb'. The red, green and blue defines the intensity of the color, it is defined as an integer between 0 and 255.

Mixing red with blue makes purple, so RGB works in a similar manner - it mixes different amounts of red, green, and blue to create a color that you want. RGB color values are supported by all browsers.


When using RGB values in HTML you can also specify the level of opacity(transparency). Using the prefix rgba() – the 'a' stands for alpha and it controls the transparency. You can insert a fourth value between 0 and 1, 0 for fully transparent and 1 for totally opaque (use decimal values for levels in between).


<body style="background-color:rgba(138,43,226,1);"> <!--Color BlueViolet-->
</body>

HTML Background Color Using HSL Color Values

HSL stands for hue, saturation, and lightness and HSL color values are specified with: hsl(hue, saturation, lightness). HSL color values are supported by all major browsers.


Hue
Hue is defined as a degree in the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.

Saturation
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.

Lightness
Lightness is a percentage; 0% is black, 100% is white.


You can also specify the level of opacity(transparency) using HSLA, the 'a' is the alpha channel to control the opacity(transparency). You can insert a fourth value between 0 and 1, 0 for fully transparent and 1 for totally opaque (use decimal values for levels in between).


<body style="background-color:hsla(271.1,75.9%,52.7%,1);"> <!--Color BlueViolet-->
</body>


HTML Color Contrast

Contrast plays an important role in the success of any website and it ensures the quality of the user experience. Websites with bad contrast can be hard to read and use. It may be easy to determine colors which do not work well together, but it's hard to decide which colors that pair effectively together.



Take a look at the picture to get an understanding of colors you may use together.



HTML Color Contrasts
HTML Color Contrasts



Summary

  • Colors can be represented in many different ways.
  • All major browsers support 140 different Color Names and they also support Hex color codes, RGB and HSL values. For example color blue can be represented as blue, #0000ff, #00f, rgb(0,0,255) or hsl(240, 100%, 50%).
  • Use background-color to set a background color
  • Use color to set the text color
  • Use border-color to set a border color.
  • Understand what you want to demonstrate and evaluate which colors that will help you in your presentation.









Check this out

JS JavaScript: Var

Var is a keyword that is used to declare a variable.

But, you should NOT use var, use let when declaring a variable.

One of the most important things is that you should try to keep things simple!

JS JavaScript: Switch

The switch statement evaluates an expression and match the expression's value to a case clause.

A switch statement can replace multiple if checks.
It gives a more descriptive way to compare a value with multiple variants.

JS JavaScript: Bitwise Operators

Bitwise operators will handle their operands as a sequence of 32 bits (zeroes and ones), and not like decimal, hexadecimal, or octal numbers. For example, the decimal number nine has a binary representation of 1001. Bitwise operators perform their operation....

JS JavaScript: Strings

JavaScript strings are used for storing and manipulating text.
A string can be any text inside double or single quotes.

Strings can contain letters, numbers, symbols, punctuation, and even emoji.

A JavaScript string stores a series of characters like "Jonny ....


BACK TO TOP

BACK TO TOP

Need more Honney

NDC Conferences

The NDC Conferences (Norwegian Developers Conference) are one of the world`s largest independent software conferences for .NET & Agile development. The conference covers everything you need to know within software development. The conferences are held each year in many places such as Oslo, Copenhagen, London, Sydney and Minnesota.

Update Conference Prague

Update Conference Prague is the biggest developer conference in the Czech Republic. The conference is offering sessions delivered by the top experts from all around the world. Their goal is to inspire the attendees and enrich their knowledge.

Troy Hunt

Learn about Web Security from Troy Hunt. He is a really engaged speaker that frequently give talks on conferences around the world. Troy is a Microsoft MVP and you can even learn from him on some great courses on Pluralsight.

W3Schools

W3Schools.com is a great education Web Site for learning web technologies. On W3Schools you may find well organized basic to advanced tutorials and references.

Scott Hanselman

Learn about Web Technologies and new trends from Scott Hanselman. Scott Hanselman is an author of developer books and he is an engaged speaker that usually talks about the Microsoft stack. You may meet Scott on conferences around the world.

Developer Week

DeveloperWeek is one of the world’s largest developer conferences. Developer Week focus on new dev technologies, the conference have talks and workshops for newbies and experienced audience. You can attend on a Developer Week conference different places in Nothern America.


BACK TO TOP

Honneybag blog



Learn JavaScript Debugging

Searching for bugs and fixing them is called code debugging. The bugs might be difficult to diagnose and therefore it is important to have a good approach to find and fix the bugs effectively. Bugs in the code might be syntax errors or logical errors. Sometimes nothing happens when the code contains bugs and there is few indications where to search. Modern web browser includes a powerful suite of developer tools. The tools do a range of things...

Explore JavaScript Arrays

Arrays are frequently used by developers. Programming languages can have slightly different implementation of arrays. An array is an object that can store a collection of items. You may say it`s a special variable that can have more than one value. The array holds many values under a single name, and you may access the values by referring to an index number. The easiest way to create....

Ultimate Guide to HTML Colors

It is essential to give the user a good user experience. There are many things you should focus on, one of them is how you use colors on your website. We don't have to struggle with black and white TVs anymore. Users expect more and more and we can apply colors to everything we want. Texts, borders, backgrounds, shadows – in HTML they all can have whatever color you decide....

Wanna be a sheep? Check out the most popular subjects
HONNEYBAG BLOG
JAVASCRIPT ESSENTIALS
HTML FORMATTING
HONNEYBAGBLOG INSPIRE-AND-BE-INSPIRED
HONNEYBAGBLOG EXPLORE-JAVASCRIPT-ARRAYS
Wanna be a little different? Check out the less popular subjects
HTML ESSENTIALS
JAVASCRIPT BREAKER
HTML COMMENTS
HTML BUILDING-BLOCKS
HTML COMPUTER-CODE
BACK TO TOP