When you open your color window in Adobe Illustrator you see so much information that it’s sometimes a visual overload of what to look at. Let alone figure out what all of this information is in the control panel and how to zero in on what information to look at. I’m going to show you a quick way to focus your eye on just the HEX color code to control and change color. While Crayola color names can be easy to remember Hex colors give you a much greater range of colors.

 

 

 

 

How to use a HEX color in illustration?

Lets break it down, a HEX color or hexadecimal color code is a representation of a color in the RGB (Red, Green, Blue) color schemes. RGB is the color format for digital art and when you print something you use CMYK. When I make an illustration I start coloring it with my library of HEX colors. It is a  6-digit HEX number code that is used in digital images. Each digit in the hex code represents a value for red, green, and blue. The combination of these values creates a unique color. The syntax for a hex color code is a hash symbol (#) followed by the six hexadecimal digits, for example #F6F6F6 is my background grey color on this website.

To view a HEX color in Adobe Illustrator open the Select color window and you can see the HEX value in the # field box. You can visually move around the colors on the left, adjust the vertical color bar or just type in codes on the right.

 

 

 

How to read a HEX color code?

The first two characters represent the red component, the next two characters represent the green component, and the last two characters represent the blue component. By using different combinations of these values, you can represent millions of different colors. Which is scary and awesome all at the same time. Numbers are used when the value is 1-9 and letters are used when the value is higher than 9.

 

 

 

Who came up with a HEX color?

The concept of hexadecimal color representation was developed as part of the early computer graphics systems. It was not invented by a single person, but rather evolved over time as a result of the efforts of multiple people and organizations in computer graphics and interaction. One of the earliest forms of computer graphics was created in the 1960s using a limited color palette of only a few colors. As  technology advanced and the number of available colors increased, the need for a more sophisticated color representation system arose. The use of hexadecimal color representation became widely adopted in the 1990s with the widespread use of the World Wide Web and HTML. The W3C (World Wide Web Consortium) standardized the use of hexadecimal color codes as a part of HTML and CSS (Cascading Style Sheets), which made it easier for web developers to create visually consistent and attractive websites.

 

 

Why should you use a HEX color in digital illustration?

Every screen renders images with color profiles (more on that in another post) but if you use a consistent color profile and provide a hex color across devices you can easily match colors so they appear the same across each device. Its an easy 6 digit code that you can copy and paste or remember from one project to another. Such as #f6f6f6, Its always in the back of my head like my lunch code from high school. I never forget it and there is a pattern. It also works on digital (where most of my work appears) and can be converted to a CMYK color or Pantone for printing. For me, a HEX color is an easy way to remember a RGB color value without having to remember what box to put what number. Whats great is that if you build it in one program it can easily be imported into another like Figma since they use the same color models.

 

 

 

 

HEX vs RGB.

The article is about my love affair for HEX so of course i’m going to shit talk RGB here. But in reality RGB is just as accurate of a color value as HEX. HEX codes are minified versions of RGB color values so they load faster on browsers and apps. So if you need to learn a system why waste time in RGB. The digital standard uses HEX. But lets give an overview of what RGB is. RGB defines the values of red with the first number, green in the second number and blue in the third number. When you see a 0 that means there is a lack of color or none, then it goes up to 255. For example you white would be (255,255,255)

To get a HEX color from an RGB value follow these steps:

1. Multiply the first number by 16
2. multiply the second number by 1
3. add the two totals together

 

 

 

 

What is HEXA?

Yes, lets talk about transparency and how it is fantastic to layer a color on top of another to create depth to images. In RGB you can do transparency. You can define the transparency of a color in RGB vs HEX. Here is an example of what a transparent white color would be in a RGB value (255,255,255,0) The 0 in the 4th value indicates the transparency value. There is a new version of doing transparency with HEX colors and its called HEXA, which is HEX + Alpha and it takes 8 digits instead of 6. The pattern of pairs is #RRGGBBAA  you can also do 4 digits like #RGBA. Not every program supports HEXA but in the digital world everything moves so fast, so just wait 15 minutes and it might work in your desired application.

 

 

 

Troubleshooting a HEX color in a JPG image vs a PNG or HTML images.

If you’re performing color matching with an image vs a HTML rendered code image you might see an variation in the color due to image compression. This has caused me a head banging on the keyboard type moment when I was trying to match a jpg to a seamless background HEX code. When you use a HEX color to match up with a web background sometimes the color looks off, either in an image or a video and you can find yourself scratching your head as to why this is happening. It’s because of image compression, either with your software or the backend of your website. For instance you can see a color looking different in a PNG image file vs a JPG image file. Thats because a PNG has a wider range of colors and will show a color more accurately in a PNG file vs a JPG. There are defiantly drawbacks to using a PNG file such as it makes the image weight almost 2x bigger causing your website to load slower but it is an easy workaround to making sure the seamless effect you might be trying to achieve.