Home

How to Select a Base Hue on the Color Scheme Designer for HTML5 and CSS3 Programming

|
Updated:  
2016-03-26 13:17:41
|
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon

The Color Scheme Designer works by letting you pick one main hue for your HTML5 web page and then uses one of a number of schemes for picking other hues that work well with the base one. To choose the base hue you want for your page, click a color on the color wheel.

The color wheel is arranged according to the traditional artist's color scheme based on HSV rather than the RGB scheme used for computer graphics. When you select a color, the closest RGB representation is returned. This is nice because it allows you to apply traditional (HSV-style) color theory to the slightly different RGB model.

When you pick a color on the color wheel, you're actually picking a hue. If you want any type of red, you can pick the red that appears on the wheel. You can then adjust the variations to modify the saturation and value of all the colors in the scheme together.

To pick a color using this scheme, follow these steps:

  1. Pick a hue.

    The colors on the color wheel represent hues in the HSV model. Find a primary color you want to use as the foundation of your page.

  2. Determine a scheme.

    The scheme indicates which other colors you will use and how they relate to the primary hue.

  3. Adjust your scheme.

    The main schemes are picked using default settings for saturation and value. The Adjust Scheme tab allows you to modify the saturation and value settings to get much more control of your color scheme. You can also adjust the level of contrast to get very interesting effects.

  4. Preview the scheme.

    The Designer has several options for previewing your color scheme, including the ability to create quick web pages using the scheme. You might also look at the color blindness simulators to see how your page appears to people with different kinds of color blindness.

  5. Export the color settings.

    If you want, you can export the color settings to a number of formats, including a very nice HTML/CSS format. You can also save the colors to a special file for importing into GIMP or Photoshop, so the exact colors used in your page will be available to your image editor, too.

About This Article

This article is from the book: 

About the book author:

Andy Harris earned a degree in Special Education from Indiana University/Purdue University–Indianapolis (IUPUI). He taught young adults with severe disabilities for several years. He also taught himself enough computer programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives, and some computers connected to each other with arcane protocols. He taught programming in those days because it was fun.
Eventually, Andy decided to teach computer science full time, and he still teaches at IUPUI. He lectures in the applied computing program and runs the streaming media lab. He also teaches classes in whatever programming language is in demand at the time. He has developed a large number of online video-based courses and international distance education projects.
Andy has written several books on various computing topics and languages including Java, C#, mobile computing, JavaScript, and PHP/MySQL.
Andy welcomes comments and suggestions about his books. He can be reached at [email protected].