Vexed by Hex Web Colors? RGB is OK!
|
If you’re a photographer, videographer, or designer you probably think of color in RGB values such as 71,181,108. If you’re a print designer, you may have learned how to see color in CMYK values. But every web designer is taught to enter colors in hexadecimal values like #47B56C, which is like an alien language compared to the more traditional RGB and CMYK color values. Working with hex color values can be an obstacle for an RGB-brained photographer or print designer trying to recognize colors in their code when building a website.
Hexadecimal color notation is taught as the conventional way to enter colors in HTML or CSS code. But “conventional” doesn’t have to mean “mandatory.” Entering colors as RGB values is actually allowed, and it’s easy to do.
See also: Game Teaches Hexadecimal Colors
How to Specify RGB Colors for the Web
Suppose you’re setting the background color for an element in the Cascading Style Sheets (CSS) code that controls the look of your web site or mobile app. If you’ve been specifying hex colors up to now, the color code looks like this:
background-color: #9932CC ;
Using RGB color values, you can express the same color like this:
background-color: rgb(153, 50, 204) ;
As you can see, when specifying web colors as RGB values instead of hex values you need to remember these three things:
- Use “rgb” instead of the “#” symbol
- Put the RGB values inside parentheses
- Separate the RGB values with commas
As in Photoshop and other graphics software, each RGB value can be 0 (black) to 255 (white), based on the 256 levels available in each of the red, green, and blue color channels in 8-bits-per-channel RGB color. It’s also possible to specify RGB values as percentages, which is less common, but if you wanted to do that the example would look like this:
background-color: rgb(60%, 20%, 80%) ;
It’s OK to mix color value models in a CSS file. For example, you can specify some colors using hexadecimal values and some using RGB values as I’ve highlighted in the figure below.
See also: Learn HTML Through Song
Where Did Hexadecimal Color Values Come From?
Print and video existed before the web, so how did hexadecimal color become the way to describe colors on the web? In part it’s because of the way each medium developed. The earliest medium, print, uses CMYK color values based on the primary colors for inks on a press: cyan (C), magenta (M), yellow (Y), and black (K). Video uses RGB color values based on the red (R), green (G), and blue (B) primaries in video displays.
Web pages are built using computer code, which is fundamentally based on binary values. Hexadecimal values are convenient for programmers partly because are easy to convert to and from binary numbers. Instead of the familiar base-10 system (counting from 0 to 9), hex values are base-16 (counting from 0 to 9 then A to F) . Programmers created the original World Wide Web along with the Hypertext Markup Language (HTML) that web pages are built on, so programmers expressed colors their way: with hexadecimal values.
In the early years of the web, using “web-safe” colors was recommended. Web-safe colors belonged to a palette of 216 colors that could be displayed consistently without dithering on many web browsers, during the era when most computers couldn’t display more than 256 colors. Because of the way web-safe colors were numerically spaced, it was easier to remember the hex color values of web-safe colors than their RGB values. Today, displays from large screens to smartphones can display millions of colors without dithering, so memorizing hex values for web-safe colors is not as useful as it once was.
See also: Make an eBlast Promotion with Photoshop and HTML/CSS
Some Are Still Under the Spell
If your target audience will use your web site or mobile application with browsers and devices that support current web standards, chances are you can use RGB color values in your CSS code without a problem.
However, using hexadecimal color values is still so entrenched in web design that you may run into places where RGB values can’t be used even though they’re fully supported in the CSS standard. I’ve noticed that some third-party website building tools that have their own user interface, including some WordPress themes and plug-ins, allow only hex values to be entered for colors. If you’d like to use RGB values in a project where you won’t be editing CSS code directly, be sure to verify that RGB values are compatible with all components of the web publishing system or content management system you’re working with.
The WordPress plug-in below is an example of a user interface where you can enter only hex values even though the underlying CSS allows RGB color values.
For those times when entering hex color values can’t be avoided, I still convert between RGB and hexadecimal values using converters such as the one on the HTML Color Picker web page at W3Schools.com, or the color pickers in applications such as Adobe Photoshop as shown in the figure below.
Freed from the Hex
If you’ve been spending lots of time converting your site design’s RGB color values to hexadecimal before typing those colors into your web site’s CSS files, or converting from hex to RGB just so you can visualize the colors used in your code, you may be able to skip all those steps by entering your CSS colors as RGB values. You’ll then be able to spend more of your time designing instead of working with numbers.
 |