Smashing Html5 : Working with Color Values - Integrating Your Color Palette with Your Web Page

2/1/2015 8:40:47 PM

Having a color palette doesn’t mean that your page will look good — even color-wise. Within the same palette, some colors go together better than others. For example, a midtone background may not provide the contrast you need for other midtone colors, so a dark or light color in the palette may be a better choice. Figure 1 shows the color palette developed around a logo that will be used as the page’s palette.


Figure 1: A logo-based color palette.

The hexadecimal integer values for the four colors are pasted right in with the CSS3 at the top of the HTML5 page for reference. The following script employs the colors so that they work with the logo and rest of the page.




<style type=”text/css”>

/* 027333,7FA646,D9B448,F2DFA7 */

body {




font-family:Verdana, Geneva, sans-serif;



h1 {

font-family:Tahoma, Geneva, sans-serif;



h2 {

font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;








a {

font-family:Arial, Helvetica, sans-serif;







a:hover {




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

<title>Arranging Colors</title>




<a href=”#”> &nbsp;Link 1 | </a>

<a href=”#”> &nbsp;Link 2 | </a>

<a href=”#”> &nbsp;Link 3 &nbsp;</a>

</nav> </div>

<img src=”Sandlightlogo.gif” alt=”Logo” align=”left”>

<header><h1>&nbsp; &nbsp;&nbsp;Welcome</h1></header>



<h2>&nbsp;We are all about...</h2>

Sandlight Productions is an international development company that specializes in HTML5/CSS3, streaming video, mobile device development, online education, ActionScript 3.0 architecture, Flash, and PHP.





<a href=”#”> &nbsp;Link 1 | </a>

<a href=”#”> &nbsp;Link 2 | </a>

<a href=”#”> &nbsp;Link 3 &nbsp;</a>





The CSS3 script uses the property a:hover to change the property when the mouse is over the link. In the <a> tag CSS3 definition, the text-decoration is set to none, which means that the text link will not be underlined. Without the underline, you want to do something to alert the user to the presence of a link; you do that using the hover property. Changing the color of the link text subtly yet effectively shows the user that the mouse is over the link. Both the initial color and the hover color are part of the palette. So, in setting up the page, remember that more than just the <body> and <h> tags use the color palette.

This particular design is focused on mobile devices (see the right side of Figure 4-10), but it should work with computer and table screen as well (see the left side of Figure 2).

Of course, your page is always going to look better if you have a Web designer do the page design. However, even developers can make it look better by paying attention to the color combinations.


Figure 2: A color scheme applied to a page.

  •  Smashing Html5 : Working with Color Values - Creating a Color Scheme
  •  Smashing Html5 : Working with Color Values - Adding Transparency to Color
  •  Smashing Html5 : Working with Color Values - Understanding RGB Color (part 2) - RGB decimal integer settings
  •  Smashing Html5 : Working with Color Values - Understanding RGB Color (part 1) - Using names, RGB and HSL percentages
  •  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
    Most View
    Epson Expression XP-810 - Great Quality, Pricey Inks
    Windows Management and Maintenance : The Windows 7 Control Panel (part 7) - Ease of Access Center
    Fujifilm FinePix F900 EXR Camera Review (Part 2)
    Grouptest Headphones: $150-$210 - Phone Home (Part 4) - Grado SR60i
    InfoPath with SharePoint 2010 : Add Changed Event Code for Tracking Changes
    Quiet PC Serenity Gamer - Take On All Challengers
    Booting on HP 9000 Servers (part 4) - HPUX Secondary System Loader (hpux)
    Dell S2740L - A Beautifully Crafted 27-inch IPS Monitor
    Pentax K-30 With WR 18-55mm Lens
    Creating Custom Workflows with SharePoint Designer 2010 (part 2) - Workflow Actions, Creating a Simple Workflow
    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