The first thing that will be obvious from this article is that I’m not a computer programmer – I “speak” just enough html to change title tags, and to otherwise get myself in trouble. When it comes to working with code – I get help with the heavy lifting.
WordPress however, is a whole other story – I enjoy working with WordPress and am comfortable with it once I’ve had the opportunity to explore the specifics of theme that I’m working with.
Early on though, I realized that if I was going to work on Websites of any kind, I had to become more comfortable with working with the colors of the web. I was always changing the color of links, or buttons, or having to match up a color that one of my clients saw elsewhere on the web.
But as you may know, on the web, “white” is not “w-h-i-t-e” . . . it is #ffffff, or 255 255 255 . . . huh?
Although 2nd nature to most programmers – I’m sure that there is some logic behind it – to lay-designers, working with colors on the web can often be a challenge.
RBG and Hex Colors
Web colors generally come in two formats – RGB or Hexadecimal (hex).
RGB is simply the mix of Red, Blue, and Green colors used to produce the spectrum of colors that can be used. They appear as a sequence of 3 numbers, each ranging from 0 – 255.
Hexadecimal numbers, or hex numbers, are shown as a # sign, followed by 6 characters (it is actually made up of 3 sets of Hex pairs). The characters could be numbers ranging from 0-9 or letters from A-F (i.e. White = #ffffff, Black = #000000). The explanation behind this code is beyond the scope of this paper, and frankly, beyond my interest level or need to know.
Free Tools to Make Working with Color Easier
Over time, I have found a few simple yet effective tools that have made working with color much easier and more enjoyable.
1. ColorPicker: Color picker is an open color box where you can choose a color by sight, RGB code, or hex#.
Many applications that call for your to enter a color will accept an RGB or hex#, but some require one or the other. ColorPicker allows you to enter one value (RGB or hex), and will display the color, and the corresponding color codes in both RGB and HEX.
In addition, if you are displaying a color gradient, you can use the slide bar to identify color codes close to the primary color.
2. ColorZilla: Found a color you like on another site and want to know the code?
ColorZilla is a free tool that you can download to your Firefox or Chrome browser to identify the color code of a color being used on an existing website. It appears in your browser as a dropper.
To use ColorZilla:
- Select the dropper
- hover over the color that you want to identify
- the color codes will appear at the top of your screen
The dropper tool is also available as part of the Microsoft Paint program available on your PC, and probably many other graphic related software packages.
3. Color Scheme Designer: Want to find colors that work with your primary color?
Color Scheme Designer allows you to input a color, and will provide a series of compatible colors for it.
Thanks for reading. Are there other free tools that you like to use when working with color? As always, your comments and questions are welcome and appreciated!