header-slide-1.jpg
user

Choosing The Best Colors for Web and Video

Posted on Thursday, March 14, 2019 by Julia O'Reilly

Overwhelmed with color choices and how to get the best results for your website or social media campaigns?

It can be frustrating to talk about color on the internet since color varies on every display on every device, from every source. But never fear, help is at hand! Digital designers and artists use the handy method of using hexadecimal (aka HEX or Hex) values to help narrow the variables to a manageable quantity.

If you need to communicate with your designer or anyone about color, try using an online interactive color-picker to help you see how your color choices look on-screen.

Here are two of my current favorites:

Color Wheel Tool Online by Rapid Tables

https://www.rapidtables.com/web/color/color-wheel.html


This tool is supremely simple to use, and can show you variations of color themes while you’re there. Just pick a color from the wheel, and see its Hex value pop into the box. Copy the number for the color you like, and send it to your designer or team.

 

Adobe Color CC

https://color.adobe.com/create/color-wheel/

 

Adobe’s Color CC tool is a bit more intimidating at first glance (though it’s very easy to use once you poke around in it). It also offers an easy photo upload, if you want to build a color-grouping around your logo or photo or other artwork. Both RGB (red, green, blue) values and Hex values are read into the boxes beneath each color in the color panels below. Great way to see how various colors relate to each other, and to deliver exactly the colors you want to your designer or team.

Now you've got it.  Happy coloring!

Still have questions about color? Get in touch. We can help!

read more
user

Making Color Work

Posted on Thursday, March 22, 2018 by Julia O'Reilly

Color    Color     Color    Color    Color

I'm often asked about color - or more to the point, people want to know how to make a color decision.

It's a jungle out there. 

Good News

It's a really fun, colorful jungle, and there is a system.

Julia O'Reilly - making color workOK, I’m a self-confessed color theory geek.  I started early when I’d break my crayons into different sizes, peel off the labels and spend hours arranging the pieces of pure color in different patterns. I might have been a strange kid, sure, but it worked for me.

I still live, study and play in the color jungle, scrutinize how it works, why.  I can wear down anyone at a party over the topic.
 
Anyway, that’s all about me. Back to you. What if what you need right now is the right color used the right way for your project (or anything else), and your background isn't Color Theory?

More Good News and Two Easy Color Rules

  1. Selecting color is a visual problem, and it begs a visual solution. 
  2. We perceive color in relationship to other colors.  For the best professional results, designers use palettes of a limited selection of colors grouped for a particular effect or purpose.

Happily, there are some excellent online tools to help you see color and create your own palette.  Here are a few good tools to get you started.


An interactive color wheel gives you instant combinations based on a color you select.

Adobe Color CC

I selected a dark de-saturated green, in Shades color rule.  (The closer the selected color is to the center, the less color, or saturation, it has.) 

The chart displays the RGB values or HEX values for each square of color, which you can give to your designer, web or app developer or print vendor, to be sure of a good match.

Here, the same Shades color rule displays a more saturated green combination.

Selecting the Complementary color rule, the picker gives you the exact complement (opposite) of the green on the color wheel, which is a dark red.  Now the tool creates a whole new spread of colors.

 


A different type of interactive color wheel lets you spin out color combinations quickly.

Paletton



Compare the colors you selected to an accurate reference source like a Pantone™ book.

ColorMunki




To match the color you see on your screen for printing, ColorMunki will provide exact Pantone™ color book swatches.  You can grab the hexadecimal values to provide the best match for anything on a screen.


See how someone else combined colors, for inspiration.

Canva

Canva is a fun and useful "everything-you-need-to-know-about-color" design wiki.  You can search for a descriptive color name or select a color square right from the page.

 

Go to an information page that's all about the single color you selected.

 

Find interesting combinations preassembled!

You'll find inspirational tools on Canva too, and a palette generator that will kick out color combos from your uploaded photo. 

read more
user

Choosing Colors for the Web

Posted on Wednesday, October 05, 2011 by Julia O'Reilly

Whether you're working with a designer or developer, or building your own site, you will have better results selecting colors if you use a consistent benchmark for colors.  Web designers and developers often talk color to each other in HEX.  These are the hexadecimal screen values for colors.  Here's how Wikipedia defines it: 

Web colors have an unambiguous colorimetric definition, sRGB, which relates the chromaticities of a particular phosphor set, a given transfer curve, adaptive whitepoint, and viewing conditions.

Color ChartsIn other words, when you see a color in a web browser on your monitor that you like, find out what its HEX value is.  Give that number to your designer, who can designate that color exactly for a color element on your website.  

 This won't guarantee 100% perfect color consistency from monitor to monitor (every screen sees color just a bit differently), but it will get you a lot closer to a universal color.  If you need more control, you'll want to switch to using images and color management, but the use of hex colors increases the likelihood that your website colors will be seen the way you want them to be seen.

So how do you find these Fabulous hexadecimal color values? 

Here are some links to my current favorite sites: 

  • Color Scheme Designer
  • Canva  (Search for a descriptive color name or select a color square right from the page.  Each color square contains a link to more info, then follow again for some tasty color combinations.  More goodies on this site for inspiration and design assets too.)  
  • WorkWithColor   (Doughnut Color Picker, excellent info on color principles and how they apply to web.)
  • ColorBlender   (Download and send Photoshop Color Table, Illustrator Colors, or send blend by email, right from the site.)
  • ColorPicker  (Put together several colors to see them together.)
  • Colors On The Web Colorwizard  (Fun interface, easy to use. Put together several colors to see them together.)

Last but not least, Firefox has a wonderful free download utility called ColorZilla, which is what I use.  It has to be installed, but the website guides you through. It's easy.

ColorZilla lets you pick a color directly from any browser window anywhere, and will give you the rgb and the HEX values you need, handily offer to copy those values to the clipboard and store it in your favorites.  And it's always right there in your browser toolbar.

What could be better?

Any one of these sites will give you HEX values for your selected numbers.  Just look for the boxes that identify themselves as such.  They're easy to spot once you know what they are.

Julia's Tip

My suggestion is to avoid highly intense or dark colors for your page area.  Your page background color or picture tile will definitely affect the rendered color of your text. 

Take note that light text over a dark color is more difficult to see and can be fatiguing for the eyes, especially on hand-held devices (though it can be successful if handled with care). 

If you don't have enough contrast between the two colors, your text will be difficult to see even on the best of monitors or device screens.

Happy Coloring!

read more