Coding for the web can be a sloppy affair. There are often many methods to get you where you want to go, and some of them might be more efficient or more effective than others. What’s more, some solutions might not even work under all conditions. The difference between a good website and a great one can hinge on your choice of approach, and nowhere is this more evident than in HTML color coding. Coding HTML color properties can be a stressful ordeal, and you can go nuts trying to decide how to proceed.
Coding HTML color properties doesn’t have to be brain surgery, though. In this guide, we provide four different options for massaging your site’s HTML and producing a veritable rainbow of hues. Follow our simple instructions and your website will soon pulse with appealing tones, making your business’ site stand head and shoulders above the competition.
Use HSL Values
Modern browsers work well with hue, saturation, and lightness (HSL) values. This option isn’t used as frequently as some others, but it works well and is easy to implement. Assigning HSL values is a quick option, as well.
To apply HSL, use a standard style attribute, specify “hsl” as the type, and assign values in parentheses, like so:
<body style="background-color:hsl(0,0%,96%);"> </body>
You can control opacity by passing hsl on an alpha channel; use the prefix “hsla,” and place a fourth value ranging from 0 (transparent) to 1 (opaque) in the parentheses:
<body style="background-color:hsla(0,0%,96%,0.8);"> </body>
Try Using RGB Values
Using red, green, and blue (RGB) values to code HTML background color is a more popular option than using HSL—RGB works for browsers both old and new, which makes using it more appealing to coders who aim to produce sites available to a broad audience.
Apply RGB in much the same way as you would HSL. Use the same style attribute format, but replace “hsl” with ‘rgb,” and populate the parenthetical with the three color attributes:
<body style="background-color:rgb(102,0,51);"> </body>
Like HSL, you can manage opacity with RGB by assigning it to an alpha channel and adding a fourth variable ranging from 0 to 1 to the parenthetical:
<body style="background-color:rgba(102,0,51, 0.2);"> </body>
Color With Good Ol’ Hex Codes
This option is the tried-and-true standby. Assigning hex values is a popular method of coding HTML color properties as it is recognized by most browsers out in the world. The hex code also has the advantage of being a single variable as opposed to multiple ones that are subject to error.
To use hex codes to code HTML color, simply use the same style attribute with the hex code in place of “hsl” or “rgb”:
<body style="background-color:#228B22;"> </body>
Remember that hex color behavior changes depending on their placement. Always consider whether you are working with inline elements and block-level elements when assigning hex color codes.
When in Doubt, Use the Color Names
For those of us who aren’t up on our hex codes or hsl values, you can always go with color names. There are 140 color names that you can use in HTML, so if you need to get your site color changed in a flash, go with this method.
You’ll use the same style attribute as before, but you’ll want to replace the hex code with the color name:
<body style="background-color:brown;"> </body>
Using color names is an excellent method for those that need to code a simple color shift without much fuss. The next time you need to resolve your issue in a hurry, give color names a shot!
And there you have it! These are the quickest and simplest methods to utilize when learning HTML color properties. The next time you need to add a splash of color to your site, don’t fret or tear out your hair. Just get out our guide and make your website a thing of beauty!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
