Smashing Html5 : Working with Color Values - Understanding RGB Color (part 1) - Using names, RGB and HSL percentages

2/1/2015 8:20:11 PM

If you’ve ever mixed colors in anything from finger paints to a watercolor set, you have a sense of what happens when you mix colors. For computer screens, red, green and blue lights are mixed to generate different colors. For example, if you mix equal amounts of red and green, you get yellow.

To mix colors for Web pages, different values are mixed using integers, percentages, and hexadecimal numbers. CSS3 also has a limited number of named colors available that can help while figuring out the other color-mixing methods. HTML5 and CSS3 have some very sophisticated elements such as canvas that can do more with color and drawings than has been possible in previous versions of HTML.

Using names

One of the stranger experiences in working with HTML5 and CSS3 is the name set used with colors. At the root are the 16 standard colors shown in Table 1.

Table 1 Standard Color Names

















Using the HTML5 that you’ve learned so far, you can easily create a chart showing all the colors. Figure 1 shows what they look like on a Web page on a mobile device.


Figure 1: The standard CSS3 colors in a Web page.

From this root base, you can include another 131 names that seem to have no rhyme or reason in terms of why they were selected. They’re all part of a set created back in the 1980s called X11. They were adopted in the early browsers and have been with us ever since.

The reason that all the names haven’t been listed here is because designers and developers generally don’t use them. For designers, not only do the 131 names severely limit their palette, but the ones selected are nuts! Colors like papayawhip and mistyrose are hardly standard names for artists. Likewise, for developers, the values used don’t conform to any mathematical set such as the old Web-safe colors that follow a logical numeric standard. (Of course, if you want to have some fun, go ahead and include darkkhaki and ghostwhite in your Web page’s color palette.) In the next sections, you’ll see how to create the exact color you want from over a million possible combinations.

RGB and HSL percentages

In mixing paint colors, the amount of paint is sometimes listed in percentages. A certain percent of red, green, and blue will give different colors. In setting colors in CSS3, you can use percentages in two different ways. First, you can assign a color value using the following format:


The first value is the percent red; the second, green; and the third, blue. For example, the setting, rgb(43.9%,50.2%,56.5%) generates the color that the Los Angeles Dodgers use. The three percentage values add up to more than 100 percent, so you know that the percentage is a percent of the color itself and not the total. As you can see, you can be very precise for values, including fractions of percentages. The following script shows how to use this color assignment in an HTML5 page:




<style type=”text/css”>

body {



h1 {



font-family:”Arial Black”, Gadget, sans-serif;





<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Dodger Blue</title>



<h1>Los Angeles Dodgers<br>

(Formerly of Brooklyn)</h1>



When you launch the page, the colors come out precisely as you instructed, as shown in Figure 2.


Figure 2: Setting colors with RGB percentages.

A second way to assign colors using percentages is to use a hue-saturation-light (HSL) model. The big advantage of HSL is that lightness is symmetrical. That makes it easier to tweak a color to what you’d like it to be.

By thinking of a color circle arranged around 360 degrees like a compass, you select a hue. At the top, or 0 percent, you find the reds. Moving clockwise, at 30 percent the hues turn red-yellow. At 60 percent, they’re yellow. And so on around the color spectrum until you’re at 360 percent (0 percent) where you’re back to the red hues. For designers who understand the color spectrum, this makes choosing colors much easier. To create a lighter color, increase the light value; decrease the light value to make the color darker. For example, suppose you’re trying to get just the right shade of red. You start with the following color assignment:


Notice that the first value is not a percentage. That’s because it has values between 0 and 359 — the 360 degrees of a circle. (Remember: 0 and 360 are the same point on the circle.) By raising and lowering the light (the third parameter), you can make your color lighter or darker — which is far more intuitive than changing RGB percentages. The following HTML5/CSS3 script shows how easy it is to lower and raise the light value to get just the right shade of red.




<style type=”text/css”>

.redBase {

color:hsl(0, 100%, 50%);


.redDarker {

color:hsl(0, 100%, 25%);


.redLighter {

color:hsl(0, 100%, 75%);



<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>HSL Color Assignment</title>



<h1 class=”redBase”>Red Base</h1>

<h1 class=”redDarker”>Red Darker</h1>

<h1 class=”redLighter”>Red Lighter</h1>



When first using HSL, it helps to think of adding light by going higher to the sun or making it darker by going lower into a well. The tweaking process is easier for designers to get just what they want. Figure 3 shows what the different red tints look like.


Figure 3: HSL makes tweaking tints easy.

Hue and light are fairly intuitive to understand, but saturation can be a little murky. Essentially, saturation is the amount of colorfulness in a given color. A 100 percent saturation is the full colorfulness of a hue in a given light, while a lower percent subtracts from a hue — something like a color fading. For all colors, a midpoint light is going to be gray when saturation is 0 percent. Sometimes a faded or muted color is preferred, like blue jeans that have been washed many times.

  •  Web Security Testing : Automating Specific Tasks with cURL - Impersonating a Specific Kind of Web Browser or Device
  •  Web Security Testing : Automating Specific Tasks with cURL - Checking for Directory Traversal with cURL
  •  Web Security Testing : Automating Specific Tasks with cURL - Following Redirects Automatically, Checking for Cross-Site Scripting with cURL
  •  Web Security Testing : Automating Specific Tasks with cURL - Fetching Many Variations on a URL
  •  Web Security Testing : Automating Specific Tasks with cURL - Fetching a Page with cURL
  •  Sharepoint 2013 : SharePoint Publishing Infrastructure (part 6) - Check In/Out, Versioning, and Content Approval
  •  Sharepoint 2013 : SharePoint Publishing Infrastructure (part 5) - Content Management - Putting It All Together
  •  Sharepoint 2013 : SharePoint Publishing Infrastructure (part 4) - Content Management - Master Pages,Page Layouts
  •  Sharepoint 2013 : SharePoint Publishing Infrastructure (part 3) - Content Management - Site Columns, Content Types
  •  Sharepoint 2013 : SharePoint Publishing Infrastructure (part 2) - Publishing Features
    Most View
    Durable Fashionable Soul SL150 Headphone Review
    Windows Vista : Internet Me (part 2) - Test Your Throughput, Set Up Virtual Private Networking
    Switching to Microsoft Windows 7 : Migrating Applications and Data to a New Windows 7 Computer (part 1)
    Windows Server 2003 : Advanced Printer Configuration and Management
    Sharepoint 2010 : Business Connectivity Services - Adding Security Trimming to .NET Connectors
    Group Test: AMD FX-8350, FX-8320, FX-6300 And FX-4300 - All Vishera Processors (Part 5)
    Migrating to Windows Small Business Server 2011 : Performing Post-Migration Tasks (part 3)
    Hope Lives On For The Nokia Asha 206
    Fujifilm FinePix F800EXR - A Versatile Camera With Wireless Connectivity
    Why Should You Care About Gnome OS?
    Popular Tags
    Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
    Top 10
    Review : Acer Aspire R13
    Review : Microsoft Lumia 535
    Review : Olympus OM-D E-M5 Mark II
    TomTom Runner + MultiSport Cardio
    Timex Ironman Run Trainer 2.0
    Suunto Ambit3 Peak Sapphire HR
    Polar M400
    Garmin Forerunner 920XT
    Sharepoint 2013 : Content Model and Managed Metadata - Publishing, Un-publishing, and Republishing
    Sharepoint 2013 : Content Model and Managed Metadata - Content Type Hubs