When it comes to a good prank, the best pranks have a long reach but are completely harmless. In that regard, a 1962 April Fool’s Day prank perpetrated by the staff of SVT (Sveriges Television)—then the only station in Sweden and broadcast in black and white—is pretty great.
That evening, the station aired a segment led by Kjell Stensson, who they labeled as their “technical expert”. Stensson carefully explained to the audience that a new discovery had revealed it was possible to enjoy black and white television in color thanks to the light scattering properties of nylon pantyhose. The viewer simply had to stretch the pantyhose over the screen. Naturally, to extend the life of the prank, it was explained that viewing distance was critical and it would likely be necessary to move your head around a lot to get the right viewing angle for the full effect.
Thousands of people fell for the prank and it remains a memorable cultural event—many people in Sweden today recall their parents and older relatives trying, and failing, to experience color TV with a pair of pantyhose.
Color impacts everything from how a user feels when they interact with a design, to how they use the design, to whether they can fully see and understand it. Quite simply, color is a lot more than a decorative tool; color is central to user experience.
Let’s start with a common example: You’ve just finished a website design for someone. It looks and functions exactly like the wireframe. Everyone on the design team has praised the project. The client hates it, but they can’t explain why.
The culprit might be color. Different colors can evoke such strong emotions that people have sharp reactions to them. It’s part personal preference, part psychological, and even part social norms. Understanding these tendencies and user preferences can greatly impact user experience.
Here’s what you need to know.
User Expectations and Preferences
User experience starts with the type of user your website or app is designed for. Basic demographics such as gender or region where a user lives can impact their perception of your design based on color. (You can read more about color and cultural considerations here.)
One of the most interesting impacts from color on UX is linked to gender. Studies have shown that men and women tend to like and dislike certain types of color.
Men tend to interact more with websites that have darker design schemes and more saturated colors, such as the design for VLNC Studio, above.
Women tend to prefer to interact with websites that have lighter design schemes and more muted color palettes, such as Tally, below.
Some men have a sharp reaction to websites using distinctly feminine colors such as pastel pinks, purples, and yellows.
More women tend to be put off by websites with harsh color schemes such as dark background with fully saturated red accents.
Mid-tone palettes are the most generally appealing to everyone.
Color Associations and Meanings
While it’s not an exact science, colors have fairly distinct emotional associations. Note that some colors can fall into categories of extremes. These associations tend to work with other design elements to create an overall vibe.
When a user sees a certain color or combination of colors, it creates an immediate response in the brain.
You expect design elements for Coca-Cola to be red. The color is so synonymous with the brand that it’s referred to as “Coke red.” Change the color and the brand is confusing. You don’t recognize it right away. The user is jarred and doesn’t quite react in the expected fashion. The drink might even seem to taste different.
All of those feelings come from changing the color. You might have felt yourself say “what?” when you saw the first image with green Coca-Cola branding.
It impacted the user experience you would have with the brand moving forward.
Color is an important element in branding because it creates that distinct connected between a user and a design. Color tells users what the brand is about. It tells users about the thing they are about to engage with.
Change that color, or use something off brand, and the user experience suffers because website visitors are suddenly confused or uncertain about the brand they thought they knew.
User Patterns Connect to Color
Have you noticed how many websites use red or orange buttons?
There’s a reason for that.
Bright colored buttons that contrast with the background of a website – red and orange often stand out from either light or dark backgrounds. Can help users find, understand, and want to engage with click- or tappable elements because they visually, and immediately, know what their expectation of that element is.
A key part of user experience is providing easy opportunities for users to interact that they enjoy and understand.
Cruise uses a ghost-style button with red text and a red hover state. It’s a different spin on traditional solid-color buttons, but there’s little question as to how to interact with it. Color draws users to the button.
Net Bluez uses a bright orange button for the most important element in the navigation menu. Notice how that element tends to jump off the screen begging to be clicked.
Increasing Conversion Rates
Challenge yourself in the design process to A/B Test button color. You’ll likely find that one color has a distinctly higher conversion rate than the other. (And it might not be the color you expect.)
Conversion rates tend to increase when the color of buttons or links is in stark contrast to the rest of the design. So, while you want to use a brand palette, picking a contrast color is key to generating conversions that contribute to overall user experience.
Look at the website below for a minute. Which color button is most likely to make you click? (The original color is blue.)
Providing Accessibility to All Users
Finally, color impacts UX in a way that’s not emotional or rooted in psychology. It’s much more practical than that.
Color impacts user experience because it can make a design accessible or not.
In order for everyone to understand a design fully, and engage with content, they must be able to see and read it with ease. Using color palettes and contrast ratios that fall in line with Web Content Accessibility Guidelines (WCAG 2.1) can ensure that every user can understand your color choices.
Use a color-blind filter, such as those in the comparisons below, to help simulate what other users might see when they look at your website. How could that impact usability?
Think of color as a tool to help users better interact and experience the content on your website. It impacts user experience on an emotional and usability level.
The key to figuring out if color is impacting UX in the right way is through user testing. A/B color tests can be a valuable tool.
Windows 10 now lets you increase the mouse cursor’s size and change its color. Want a black mouse cursor instead? You can choose that! Want a huge red cursor that’s easier to see? You can choose that, too!
To find this option, head to Settings > Ease of Access > Cursor & Pointer. (You can press Windows+I to open the Settings application quickly.)
To change the pointer’s size, drag the slider under “Change the Pointer Size.” By default, the mouse pointer is set to 1—the smallest size. You can choose a size from 1 to 15 (which is very large).
Choose a new color in the “Change Pointer Color” section. There are four options here: white with a black border (the default), black with a white border, inverted (for example, black on a white background or white on a black background), or your selected color with a black border.
If you choose the color option, a lime green cursor is the default. However, you can choose any color you like. From the “Suggested Pointer Colors” panel that appears, select “Pick a Custom Pointer Color,” and then choose the one you want.
That’s it! If you ever want to tweak your mouse cursor again, just come back here.
From this Settings pane, you can also make the text entry cursor thicker so that it’s easier to see when typing. If you have a PC with a touch screen, you can also control the visual touch feedback that appears when you tap the screen.
Saving color palettes you find online or as you’re working on a design is not always an easy process. You could use the browser’s Inspect tool to grab the hex code or grab a screenshot and use Photoshop later on to pull the colors from it.
Or you could simplify the process and grab a dedicated color picker tool that will allow you to grab color from any website, on desktop or on mobile without having to leave your browser window. Here are 10 best color pickers that will make it easy to save color palettes.
1. Instant Eyedropper
Instant Eyedropper is a free Windows-only tool that makes it easy to grab a color from anywhere on your screen. Once you install this lightweight app, it will sit in your system tray. All you have to do is click its icon and choose a color, then the app will copy the code to your clipboard. The app supports the following color code formats: HTML, HEX, Delphi Hex, Visual Basic Hex, RGB, HSB, and Long.
ColorPic is another lightweight Windows color picker tool that works with all major versions of Windows. It’s not a free program although it offers a free trial. It was designed to work specifically with high resolution screens and supports HEX, RGB, and CMYK color formats. You can save up to 16 colors in the palettes, and use 4 advanced color mixers to adjust the colors.
3. Eye Dropper
Eye Dropper is a browser extension that works on Google Chrome and any other Chromium-based browser. The extension allows you to quickly and easily grab a color from anywhere in your browser and displays it in HEX or RGB format. You can save colors to history and they are automatically copied to your clipboard when you pick a color. The extension is free to use.
4. ColorPick Eyedropper
ColorPick Eyedropper is the second-most popular browser extension that works in Chrome and Chromium-based browsers. What sets it apart from the Eye Dropper extension above is the ability to zoom in on any area of the browser window to help you focus in on the exact color you want. The app is free for personal use and it also has its own desktop app if you want a tool that works outside your browser window.
ColorZilla is a Firefox extension that allows you to grab any color from any page that’s open in your Firefox browser window. This extension has a built-in palette that allows you to quickly choose a color and save the most used colors in a custom palette. You can also easily create CSS gradients. The extension is free and supports HEX and RGB color formats. It can also be used with a Chrome browser.
6. Rainbow Color Tools
Rainbow Color Tools is another free Firefox extension that makes color picking easy. The extension lets you easily pick a color and it also includes a website analyzer that extracts the color scheme from the current website’s images and CSS. It supports RGB and HSV color formats and allows you to save the colors into your own personal library that lets you tag images based on websites you picked colors from or your own tags.
7. ColorSnapper 2
The ColorSnapper 2 is a color picker for Mac users that helps them find a color anywhere on their screen. The app is invoked by clicking the menu icon or through a global shortcut and it has a unique high-precision mode for better accuracy. You can choose between 10 different color formats and control the app with gestures and keyboard shortcuts. The app is available in the app store and comes with a 14-day free trial.
8. Just Color Picker
Just Color Picker is a multi-platform utility for choosing colors. This tool allows you to pick colors, save them, edit them, and combine them into color palettes ready for use in other applications. It supports a wide range of color formats and includes a zoom tool for better accuracy, the ability to edit Photoshop and Gimp color swatches, and it can even calculate distance between two pixels.
iDropper is a color picker for iOS devices. It’s compatible with iPhones and iPads so if you do design work on your iPad, you’ll easily be able to grab colors, save them, and use them in any application. You can save colors to your favorites and supports RGB, HEX, HSV, and CMYK format. The app is free to download and use.
If you belong to team Android, then be sure to check out the Pixolor app. When you enable the app, it shows a floating circle over other apps along with the color information beneath it. To copy the color code, all you have to do is click the Share button or tap outside the circle overlay. The app supports RGB and HEX color formats.
Once upon a time in an England far removed from the present, Englishmen were for want of a specific word to describe what we now call “orange”. What we would now casually refer to as orange in color they called, depending on its shade, a variety of different compound Old English words including ġeolurēad (yellow-red) to describe reddish orange, or ġeolucrog (yellow-saffron) to describe yellowish-orange.
It was only when they were introduced to the fruit by the French, which was called “orange” in the Old French of the day, did the word enter into the English language to give that particular shade of yellowish-red a distinct name. The first recorded instance of “orange” as a color designation in the English language was in 1512.