In this post we’ll analyze a variety of useful techniques that will allow us to tone map an image for future print or web design projects.

You probably have your own way to color correct and alter the tone of an image in your preferred application, but there’s a huge reason why you should know more about gradient mapping: it’s cross compatible between applications and operating systems. If you understand the basic principle, you can use it in Photoshop, Gimp, Pixelmator and all other applications on Mac OSX, Windows or Linux. It’s a powerful technique also in video editing systems and generally where you want to alter the colors of an image.

Our Original Image

This is the image that we’ll use for our gradient map toning examples. One thing is important: if you want to use the gradient map tool, and generally any tool that implies altering colors, avoid tweaking the exposure and brightness/contrast of the original image. Try to shoot the image as best as you can because you’ll be able to work on real pixel information. If you alter the exposure after the shooting a whole lot, you’ll loose a lot of details that will compromise the toning.

As you can see, it’s a simple shooting at Park Guell, in Barcelona, on a rainy day. Before you begin to go into Photoshop, let’s analyze the image. The important thing here is to understand three color zones that will make our tone mapping a breeze. You have to focus on highlights (areas that are brighter, getting to white), shadows (areas that are darker, getting to black) and midtones (areas that are between brighter and darker areas, getting to gray). It’s important to train the eye to understand differences between these areas so that you can target them easily with the gradient map tool.

The gradient map tool works in a really simple way: you choose a gradient and Photoshop will map the image with the gradient. The left color of the gradient will be mapped to shadows, the right color will be mapped to highlights and the middle area of the gradient will be mapped to midtones.

Let’s start with a self explanatory example.

Black & White Tone Mapping

Let’s add a gradient map adjustment layer in Photoshop, by clicking on the little circle icon in the bottom area of the layers panel, and selecting “Gradient Map”. This action will automatically add a Gradient Map Adjustment Layer with a predefined black to white gradient. As you can see, you get a black and white conversion of your image, since highlights are mapped with white and shadows are mapped with black. It’s a pretty boring black and white image. But let’s add a white color stop in the middle of the gradient and assign black to the left and right stops.

Now the effect is extreme, but useful to understand how the gradient map works. As you can see the subject of the photo is highlighted. Why? Because we pushed to the white all the midtones in the image, and since the monument in the original photo was having a lot of midtones areas, it’s entirely white now. The sky is black because the areas that in the original image were near white have been mapped to black. This is the power of the gradient tool. It’s intuitive and after a little bit practice you’ll be able to achieve a really professional color correction. The HEX color codes for this effect are #000000 to #ffffff to #000000.

X-Ray Tone Mapping

Now we can start experimenting with some colored gradients to give the image a distinctive and creative look. Obtaining a pseudo x-ray style with a gradient map is very simple. Just add a new gradient map layer with a gradient that starts at #020144 and ends at #95a2ce. With this gradient the image turned to blue, but you’re not actually seeing the x-ray effect. The secret is in the “reverse” option. By checking this option you reflect your gradient, and the tone mapping is reversed so dark areas will turn to light blue and bright areas will turn to dark blue. The final result is an x-ray color corrected image.

Warm Tone Mapping

In this section we’ll take the gradient map tool to another level by introducing the overlay blend mode and the opacity adjustment. As you can see from the image, the result is fairly better that previous effects. Let’s start from the gradient. In this case is a simple two stops gradient, from #ff0015 to #fff800. If you apply it before the effect you will soften the image and you’ll loose a lot of details.

The trick is, whenever you see that the gradient map is too visible, select the overlay blend mode for the current gradient map layer. This way the layer will be applied with the low contrast/high contrast method and the result will be more real and consistent. If it’s still too heavy, just decrease the opacity a bit (in this particular case 70% is fine) and the image will be warmed.

Cold Tone Mapping

As you can see from the image, in this case we have to choose some cold colors to achieve the opposite effect. A cold image is an image that has a color space defined by cold blue colors. In this particular case a simple two stops gradient will not work since the midtones of the monument would be too dark.

After experimenting with colors and stops, a good solution could be a gradient from #004170 to #9dd4fb to #bde9fa, with a middle color stop at 28%. This gradient will cool down the sky and the ceramic parts of the monument, while lighting up dark areas. The final result is a more dramatic image, that presents itself better than the original image due to the weather conditions of that particular rainy day.

It is always surprising how many fresh, innovative and always useful tools and resources appear from week-to-week from within the web design community. In this weeks design news round-up we take a look at four more cool and free new apps that may help you with your next web project.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block. It aims to cut down on development time and help you create beautiful-structured websites.
The Square Grid ?

Jo – HTML5 Mobile App Framework

Jo is a new and lightweight JavaScript framework designed for HTML5 apps.
Jo – HTML5 Mobile App Framework ?

Frame Box – Lightweight Tool for Creating Mockups

Frame Box – Lightweight Tool for Creating Mockups ?

Ultimate CSS Gradient Generator

HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects. This easy to use copy-and-paste tool gives you complete control when creating your CSS3 gradient.
Ultimate CSS Gradient Generator ?

By Paul Andrew (Speckyboyand speckyboy@twitter).

Whether you design for the web or print there is one key design tool that you should have in your design toolbox, and that is good and reliable color scheme tool… But which one? This was a question that was asked this week on Answers. We received a number of good answers and recommendations to a lot of great tools, but still felt we should open it up to the regular readers of Design Reviver. So here you have it: “What is the best color scheme tool?”

You can leave your answer and your favorite color tool below in the comment section, or you can leave your answer on the original question on Answers: What is the best color scheme tool?

Could you refer me to the best color scheme tools?

This question was originally asked by Kevin M., and you will find the best answer below:

Best Answer from Pablo G:

Unanswered Answers

Thats two weeks running with no unanswered questions, AWESOME!!!

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

Have you ever visited a site that sells themes and allows you to easily switch between them within a fraction of a second? Most of have, and we can agree that this makes switching between these much quicker and easier. The cool thing about ThemeSwitchers is that any website with a similar function (i.e. switching between color swatches from an online color app) can utilize them through the power of jQuery.

Below you will experience a beautiful showcase of websites that use ThemeSwitchers and we also provide you with great tutorials and screen casts on how to develop your own and fully integrate it with your website.

Examples of Great ThemeSwitchers

HutchHouse

The HutchHouse theme switcher is located at the top right hand side of your screen. It allows you to switch between themes such titled space, jungle, night (default), and depth. The themes have their own identity, illustrations and colors.

WooThemes

Sites such as WooThemes are infamous for knowing how to encourage the user to switch between themes and choose various options from a list. Here the switcher is located at the top of the page and it lets you choose different themes and styles. You can also elect to purchase the theme all in one spot.

Stephan Velthuys

Velthy.net has a simple color switcher at the top right hand corner. As you scroll over the color you wish to view the site in, the small tabs subtly pop-out.

Marius Roosendaal

Marius’s website is one of the first websites I had ever come across a few years ago that allowed you to change between themes. This website has the switcher at the top of the sidebar and lets you switch from a morning, to a night, and later a sunrise theme. It’s pretty fascinating.

Komodo Media

This website uses a revolutionary function for switching/altering the way your website looks without having to reload the web page. There is a “foliage-o-meter” located on the right sidebar and if you click, hold, and drag the pin to the left Komodo Media’s theme becomes much simpler and it reduces the illustrative “clutter”. If you drag the pin to the right it will increase the amount of illustration that can be viewed throughout the sites theme.

Anidea

Anidea’s theme switcher allows the user to quickly choose between actual photographic and illustrative themes that replace the current one at an instant. From what we counted there are 8 available themes.

Stationery Style

This theme switcher lets the user switch the current websites color from black, dark grey, to an even lighter grey. Switching between colors on this site is a great way to enhance the usability.

Pure Structure

Pure Structure gives you a dynamic style switcher where the presentation of the websites portfolio can be adapted, and the background image can be changed as well. There two reasons to use this switcher, to change the structure of the website, and to replace certain visual elements.

Schillmania

Schillmania has an advanced mood switcher: visitors can adjust the brightness of the displayed header image and add a snow effect

Carreras con Futuro

Carreras con Futuro allows the user to change the hand-drawn background image. The style switcher changes the color of the background, and also changes the color of specified elements within the sites layout.

Absolute Bica

The Absolute Bica portfolio site uses a large, nature-inspired background image. The style switcher allows visitors to chose a time of day: sunrise, afternoon, sunset, or night.

eAnka

The eAnka portfolio site uses a nature-inspire illustration as a header and background of the site. The style switcher gives visitors the choice to view the daytime or nighttime version.

Small Stone

Smallstone allows its visitors to “swap out the shelf” — exchange the header, visuals and links. The style switcher is placed right under the header and is also designed in a unique and professional way.

Best Web Gallery

Nick La’s popular gallery site Best Web Gallery offers three different options for displaying the layout.

Kulturbanause

Kulturbanause has a quite unusual blog design with two artistic themes — Daylight and Sunset. The style switcher is placed in the sidebar. When the theme is switched both graphics and visuals are changed.

Joshua Piersanti

Joshua Piersanti’s portfolio site includes a style switcher that flips between a day and a night theme. When the background image changes, as does the color of the text to contrast the changing background.

Nofrks

Nofrks has a day and a night style. In both cases only background image is replaced.

Planatopija

Planetopija enables users to change the color of the header illustration. The style switcher itself is nicely designed.

Diego Valobra

Diego Valobra has two different antique designs. The background image is replaced. The style switcher is placed in the right bar of the layout.

Fantastic Tutorials

Stylesheet Switcher Using jQuery

It is slightly more fully featured than the original version (which was written back in 2006!) as it includes the option to toggle stylesheets (which will loop between the available stylesheets one after the other). It is also more reusable as you can now trigger the stylesheet switching from your own code.

How To Create An Amazing jQuery Style Switcher

n this tutorial you will be shown how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

A Simple jQuery Stylesheet Switcher

This is a really simple jQuery theme switcher that offers great usability and a stylish way to allow your users to switch between themes or colors.

Create a better jQuery stylesheet switcher

This is a quick and easy work-around to create a better jQuery stylesheet switcher. In this tutorial you’ll be able to change the colors of a website.

jQuery CSS stylesheet switcher

This tutorial shows you how to create a CSS style sheet switcher using jQuery for your site. This style sheet switcher has conventient forward and back links for you to cycle through available sheets and incorporates the cookie plugin so that user preferences can be retained for later visits.

CSS Style Switcher – Design Shack

This is a quick tutorial from Design Shack that provides code for a style switcher.

Quick Tip: How to Create a Theme-Switcher in 200 Seconds E

Have you ever seen sites that offer some kind of “color-switcher” within the header section? Want to know how easy it is to replicate? Here you’ll see how you can create a style-switcher in 200 seconds, using jQuery.

Style Sheet Switcher from Dynamic Drive

This is a “plug & play” style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your site. With a change of style sheet the entire look of your site can be transformed. Persistent cookies are used to store the user’s selection and automatically recall that style sheet upon his return.

Easy Display Switch with CSS and jQuery

A tutorial by Soh Tanaka on DesignM.ag that shows how you can achieve a similar effect as Best Web Gallery to give visitors layout options.

Change CSS styles with PHP and jQuery

Here is a tutorial on how to dynamically change stylesheets of a web page, without reloading the page using AJAX and jQuery. Use Google translator service to translate this page from spanish to your preffered language. Download link for the code used in this tutorial is also available. (Here’s the English Version)

You will probably have your own traditional methods for finding useful design information and resources, but you can’t beat studying a well crafted and creative info-graphic, and if it teaches you something interesting or if it is helpful and insightful in any way, then its even better.

Below you will find three more info-graphics for designers.

Colours In Cultures

What colour is happiness in China? Or good luck in Africa? Or anger in Eastern Europe? Are any color meanings universal across cultures and continents?

Colors In Cultures is a visualization of the meanings of different colours in different cultures by David McCandless and AlwaysWithHonor.com.
Colours In Cultures

So You Need A Typeface (Flowchart)

Choosing the perfect font for any project can be difficult, this flowchart certainly more than tries to help with a touch of humor.
So You Need A Typeface (Flowchart)

HTML5 and CSS3 Readiness

The browsers are grouped into color schemes based on their underlying rendering engine – e.g. all Firefox versions are shades of blue, Chrome/Safari – yellow, IE – pink. Each ray also has a different background color if it is a CSS3 feature.

Each browser is represented with a tile on the bar and gets an equal width of space, so if you see a bar that is full, that means that feature has universal support among all the 8 browsers.
HTML5 and CSS3 Readiness

By Paul Andrew (Speckyboy and speckyboy@twitter).

Color is the integral element with design. It can bring a bland idea to life, it can revitalize a boring and dreary web site and can bring lifeless art to, well, life. Why is it so powerful? Because different colors can invoke different emotions with different people, thus altering our perception of how we see art.

In today’s news round up we have collected some color related articles, some tools for your inspiration and learning.

Color Theory for Designers, Part 1: The Meaning of Color

Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself.

This is the first in a three-part series on color theory, were the author discusses the meanings behind the different color families, and gives some examples of how these colors are used.

Color Theory for Designers, Part 1: The Meaning of Color

25 Color Combination Tools for Designers

There are a lot of online tools to help create a beautiful color combination. They all vary slightly to suit each designers with different preferences on how they work. In this article they collected together 25 of the best color tools, with a quick overview on each to help you decide which is best for you.

25 Color Combination Tools for Designers

Colorgorize the Web

The first version of Colorgorize was published in 2007 as a project at the University of the Arts Bremen, Germany. Back then, Colorgorize was a Firefox add-on that could display similar colored websites to the website currently opened. Colorgorize has since changed to a website recently to allow it to reach a bigger audience. Today, thousands of websites are already analyzed and can be searched by colors.

Colorgorize the Web

What If Computer Graphics Ran Under Crayola's Law?

What If Computer Graphics Ran Under Crayola's Law?

By Paul Andrew (Speckyboy and speckyboy@twitter).

Wireframes are the blue prints that define and allocate a Web sites content and behavior. They are not bound by colors, fonts, and anything that may surface on the site as part of any content. Wireframing compliments good web development and offers a visual of where the content will be laid out within the sites design. A simple wireframe displays the location of a header, main content, footer, sidebars, ad placement, and navigation.

Coming to Terms with Wireframes

Wireframes are usually created using a variety of software applications geared towards design. Most developers find good use of Photoshop and Visio stencils because they allow you to save layers and libraries of commonly used shapes and elements. Once you’re able to develop your wireframe prototype, this will allow you to interact with your client in a variety of ways such as getting an up-front view of their sites design or redesign. This also means that the developer has a clear understanding of what technologies (i.e. JQuery, Ajax, etc..) need to be used for specific elements on the site.

A large portion of these common elements are absolute needs, and if not included then this can cause your visitors to experience, leave, and express a great deal of frustration towards your site. No one wants to visit a site that offers an unclear purpose, seems way to crowded, and neglects the need for vital elements such as navigation to be labeled and easy to find.

Vital Steps to Effective Wireframing

One of the biggest mistakes you can make as a designer on a development project is failing to plan. When you wireframe this is one of the very few vital steps you need to take v.s. the other 100 or so. This is where the conceptualization of an idea starts to take shape and form to allow interaction between the sites design and back end development. Below you will find a few tips that will enable you to make not only effective but better wireframes.

Functionality Contra Superficial

Many times the way you design your wireframe depends on the tools readily available. However, it should always be more about function rather than form at some point. Once you focus on function, form will start to take place. In other words, this means that you not need to create the best looking wireframe, just one that has promising function and form. A good wireframe would include the most important of elements such as boxes, buttons, dropdowns and more.

Spending Too Much Time on Wireframes

Your wireframe has nothing to do with design. Therefore try to avoid spending large amounts of time on making your wireframe “pretty”. If you add too much design then you will end up shifting your client’s focus onto un-important aspects.Wireframe is part of the development process, just remember that design should be left to designers.

Organizing Your Wireframe

As obvious as it is, sometimes it’s easy to forget how important it is to have a well organized wireframe. You can start organizing by splitting the sections that need to be separated such as news, products and user account/registration. Once you’re able to break up your wireframe correctly, then this will bring you one step closer to a more attractive and usable design.

Choosing the Right Tools

For most designers, the pen and paper is utilized as the canvas unto which creativity is transferred on. It is much easier and faster than using a computer and lets you get thoughts and ideas down as the concept becomes much more then that. As successful designers it’s important that you use tools that you’re most comfortable with. This would increase the chances of raising the quality of work. A few tools used besides Adobe Photoshop and Microsoft Visio would be PM PowerPoint, and Designers Adobe Fireworks.

Color a Plus or Negative?

There are a few things one should avoid when designing a wireframe, one of those things would be to use too much color in your design. Our human eyes are captivated by components that posses any sort of color. We naturally begin to analyze the color scheme behind most of the things we see on a daily basis. Simply put, a wireframe with an exaggerated amount of color will more than likely distract you (or the client) from chief elements.

Although, greyscale is the standard for wireframing, it’s not always a horrid idea to use a VERY light touch of darker colors (black, navy blue, etc..) to separate your sections. However, if you utilize any form of color, it’s possible that your client could have a mal-reaction, i.e. questioning the actual colors of the site. This could easily become a set-back, or it can all together end the clients interest in using you for their sites design. Most designers limit the use of colors to links or elements that may not be included on every page. If you feel the “need” to use color, this wouldn’t be a bad idea.

Clean Examples of Wireframes

A cool new feature-rich web based color app, called ColorSuckr, has recently launched, with impressive reviews. And the always critically acclaimed Noupe, has posted 40 high quality advanced Photoshop tutorials, for graphic designers.

ColorSuckr

ColorSuckr, a recently launched web service, is a color app that extracts the 12 most common colours from any images and displays each color on a new page with the HEX, RGB and web safe color. That is the main function of the app, it also offers a hell of a lot more features:

• Flickr integration
• A Firefox extension to make it super-easy (right click images & go)
• Adobe .ACO swatch file downloads
• Color schemes suggestions from Adobe Kuler
• Drag and drop the colour results
• A simple API via RSS, JSON and XML
• Permalinks to image results (+ short url generator)

ColorSuckr

40 (NEW) High Quality Adobe Photoshop Tutorials

Noupe has recently posted a great compilation of advanced Photoshop tutorials, the assortment of tuts are new & high quality, that others have freely contributed to the design community for making your next photoshop project easier.

40 (NEW) High Quality Adobe Photoshop Tutorials

Art and science often coincide. When we approach the former using the latter, this is especially true. And in science, we disassemble the object we are studying and analyze each element as close as we may. Part of the art of web design, is color. So if we approach this element with a view toward science, we may discover ways to enhance our art for better appreciation and achievement of intent.

What is it then, about color, that we can investigate which will aid the process of fulfilling a design and the requirements of a need? In actuality, quite a few factors exist. We will study 7 in this article, because 7 is ideal for memory according to the Miller’s Number; and because 7 is biblical as my chemistry teacher used to say. Our 7 factors are:

• Emotional Impact
• Visitor Focus
• Effectiveness in Conveying Information
• Combinatorial Effect
• The Impact and Limits of Variety
• Supraliminal Suggestion
• Color as a Factor in Accessibility

Emotional Impact

Psychologists believe color does more than impact our visual systems. For example, the same mechanisms which receive color input, also allow the pulses to reach the pituitary and pineal glands by way of the hypothalamus. The pituitary regulates certain hormones and other physiological processes. In fish, it is believed the pituitary may even regulate color. The pineal, interestingly, was thought by Decartes to contain the soul. It is believed generally that at least temporary responses affecting mood occur as a result of exposure to certain colors – red to stimulate, blue to calm, and so on.

Evoking a visitor response, such as spontaneity, can be a very useful thing. Whether there is conclusive evidence is not so important as the potential effects which have been perceived for so long; in advertising, even suggestion is everything.

Psychology Color

Visitor Focus

In some applications, we can control or at least guide when and where the user puts their chief focus. On web pages, the need to attract and provide content rich enough to promote longer stays, often means we cannot control that focus. But that does not mean we cannot /suggest/ a point of focus by some other, innocently subliminal means. Color is actually a way we can do so. For instance, using more subtle colors such as pastels for most of the content and somewhat richer colors for where we wish to solicit focus can be a useful way.

Several design books, such as “Basics of Design” by Lisa Graham, suggest tips for using color to attract focus. If we extend the suggestion of this methodology, we might even invoke a somewhat guided step ladder of page elements for the visitor, by simply using decreasingly bright colors – without any true menus or structural elements.

Effectiveness in Conveying Information

White pages with black text; this has been our world for ages it seems. Yet recent studies suggest this theme may not be ideal for human subjective preference. In the 1960’s, a few brave publishers experimented with books of subtle green pages and black text – I actually had one. More recently, a study in 2007 by Wang, Tseng and Jeng suggests that “yellow-like” backgrounds with “low text luminance” are actually preferred for reading a display screen. As web designers we should sometimes look “outside the box” – not just the imaginary one, but that tri-color display we stare at all day. A subtle soft tint to that blaring white may seduce our visitors to “stay for awhile”, in the words of Amy Grant. Perhaps, no greater pride in our work could be asserted than, “I am lord of all I convey.”

Effects of Bending Curvature and Text Backgrounds

Combinatorial Effects

Print mechanisms often limit us by cost to fewer color choices. Web pages are unique in that one has virtually complete freedom of color use with no impact on cost. So we can explore combination’s which promote those factors of attraction and good design which may add value. If we apply science to the combining of colors, we obtain what is called “color harmony”. In music, harmony is achieved through the use of tones which sound pleasing together. In art, color harmony is much the same except with varying hues.

This concept of color harmony has been around far longer than computer technology; in The Psychology of Art Appreciation By Bjarne Sode Funch, one can see it dates back at least to the 1800’s. Just as there is an emotional stimulus element to a single color, there can be a pleasing perceptual response to combination’s of colors seen to be in harmony. Studying this phenomena for business purposes should certainly be a factor one should consider, where in a world of fierce competitiveness even a small margin of advantage is of significant value.

The Impact and Limits of Variety

With so many colors to choose from, how does one decide where to draw the line, so to speak? How many colors is just enough, and how many are too many? In any systems project we may become part of, we set something called scope. Yes, normally we do not think of scope as bounding one element, but certainly it can. The American Heritage Dictionary defines scope as, “the range of one’s perceptions, thoughts, or actions.” Limiting perception is what we are after (but we could equally apply this to much of our web design).

For color usage, there is a minimum and maximum scope which, for most purposes, can help us achieve best intent. That best number is most often 3 to 5. Fewer than 3 makes one’s pages look monochromatic; greater than 5 and we reach a level of distraction, even confusion. If I may coin a phrase, “biz” is always a good thing; “bizzy” usually, is not.

Color Theory

Supraliminal Suggestion

When we use science to explore something, even art, we attempt to investigate even those things we cannot be certain of. Subliminal suggestion has felt the stain of doubt for quite a time; yet psychologists continue to study the effects of it, often called priming or negative priming.

In priming, we basically get the viewer prepared to receive a related object with some intended unconscious advantage. In negative priming, one can frequently cause a person substantial delay in identifying even the obvious – for example, upon seeing a chart of color preferences this evening on the web, I had some real difficulty recognizing the percentage of preference for “red” – because the bar graph used the wrong colors (likely by intent, and for fun) for the horizontal bars of each color.

The red graph bar was actually yellow; the green was blue. Though my mind saw the word “RED” quite clearly, I could not decide if the yellow bar beside “RED” was what I wanted, or the red bar beside “YELLOW” was actually it.

One can certainly explore the possibilities of subliminal color images and the possible ethical or legal issues those may entail. But what I suggest here, is to note instead, the possibilities for misinterpretation or unintentional delays of recognition we may advertently cause by placing textual content alongside colored graphics, or colored text which might mislead. The science behind color can equally be used to reduce subliminal effects, if one knows what to avoid.

Color as a Factor in Accessibility

Finally, design and color theory aside, why else might color choice be important to us as web designers? The web is a magnificent tool for crossing the boundaries of space, even time. One can reach audiences and markets anywhere on Earth, any time or any day. But what about those boundaries which lie inside? Those millions of us who cannot see color distinctly; those 100’s of millions who live now in presbyopic fuzziness and struggle to read on flat screen technologies which are much harder on the eyes than the venerable raster? We can reach those, too.

The W3C has a complete list of tools a web designer can use to help support, even comply, with accessibility. One of these tools, pertaining to color, is AccessColor. Using a formula based on Web Content Accessibility Guidelines 1.0, it helps a designer guarantee color choices will not adversely affect access-challenged individuals, based on a formula:

“The formula suggested by the World Wide Web Consortium (W3C) to determine the brightness of a color is: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000. Two colors provide good color visibility if the brightness difference is greater then 125 and the color difference is greater then 500.”

There are far more tools and guidelines than this, but knowing can lead to doing, and doing always leads to results.

Web Accessibility Evaluation Tools

Conclusion

Web design is, itself, the confluence of art and science. We have explored just a few of the ways the science behind our art may lead to more attraction, reduced misinterpretation, response evocation, and more. And this is really only a small beginning. We are coloring our world in ways unimagined just a short lifetime ago. If by our design we investigate and identify and define those attributes which our avid competitors might miss, we can gain an advantage for our clients and for ourselves. Web design is more than an art, and more than a science; it is a process of discovery, of ways to enhance our art – for better appreciation and achievement of intent to all concerned.

Gone are the days of having to manually enter in hex codes to specify colors: with jQuery UI’s color picker, you can make your web application pick colors as smoothly as you would in desktop applications like Photoshop. When coupled with the visual appeal and functional benefit of color pickers, the ease of using jQuery UI’s gadget is something that’s hard to pass up.

The Example

Getting Started

The color picker can be downloaded from the jQuery UI download page and then included in our page using the <script> tag. Furthermore, the CSS file that is inside the default theme folder should be included, as should all of the images. There are a fair number of items to include for the color picker, but they are needed to form the interface. These should be placed within your <head> tags:

<link rel="stylesheet" href="ui.colorpicker.css"/>
<script language="JavaScript" src="jQuery.js"></script>
<script language="JavaScript" src="jQuery.colorpicker.js"></script>

All we need to do to make use of the color picker gadget is to call the .colorpicker function on a form field or div to begin:

$('#picker').colorpicker({ flat: true });

By attaching the picker to just a div and specifying the flat parameter to be true, you should see the following:

It is worth an honorary mention that the eventName parameter can be set to the name of the event that should trigger the opening of the color picker. That is, you can specify to have the color picker show up on mouseover instead of the standard click.

Wrapping Things Up

By placing the hex code into the text field at the end, we ensure that we can access the hex code from normal forms and JavaScript alike. By using standard convention with the form handling, this method also ensures that there is a safe fallback to users who have JavaScript disabled. The following is the completed example using the hide event to return the hex code, and then making use of that hex code to style the page.

Tutorial kindly written by Nathan Wong