From the course: InDesign Secrets

254 Find the hex number for any color - InDesign Tutorial

From the course: InDesign Secrets

254 Find the hex number for any color

- [Voiceover] If you do any design work for the Web or HTML, or you're collaborating with somebody who's doing Web Design, you need to understand the idea of Hex Color. Now Hex, which stands for Hexadecimal, is a number system that counts from zero to F, that is, it goes zero to nine, and then after nine is A, then B, C, D, E, and finally F. Now, if you're not used to it, it seems crazy. But it turns out to be pretty easy, once you get the hang of it. But for technical reasons, colors in HTML, are almost always spec'd, using Hex numbers. And the numbers are almost always six digits long. So, it took me forever to realize, that this is just another way to show RGB values. Like, in RGB, 255, 255, 255 means white. And 255 in Hex is FF so, the Hex Code is FF, FF, FF. That's just red, green, and blue. But when you look at a color like this green one down here, and you look at that Hex Code well, it's really hard to know what that means. Fortunately, InDesign has a few tricks to help you out. Now, I'm not suggesting that you do your Web Design in InDesign. You kind of can, but that's not what it's made for. But you might be designing stuff in InDesign, that will later be used in a website. Or, maybe you're creating stuff in both InDesign and Adobe Muse. You know Muse is that great tool, for making responsive websites. And it's really designed for InDesign users. So, there are situations where you're going to be using InDesign, but you still want to use Hex Colors. Now, there are actually several ways to find a Hex Color in InDesign. First, you can look in the Color picker. For example, now that I've selected this object, I'm going to double-click on the Fill icon over here at the bottom of the Tool panel. When I double-click on that, up comes the Color picker. And if you look down here, in the lower-right corner of the Color picker, that's the Hex number. If I choose a different number over here, the Hex number changes. Or, I could change that number, and it will update the color in the Color picker. For now, I'm not gonna change it here. So I'll just click Cancel. Instead, I'm going to open the Swatches panel. And inside the Swatches panel, I'm going to choose the Swatches Panel menu, and then I'll choose New Color Swatch. Now you'll notice this other option here called New Hex Swatch. You probably won't have that on your computer, because it's not built in to InDesign. That's a free add-on that I'm going to be telling you about in a minute. For now, I'll just choose New Color Swatch. So, here's the thing to remember. Hex colors are just another way to represent RGB numbers, right? So if I change this color mode pop-up menu, to say, CMYK or Lab or Pantone or anything else, I will not be able to choose a Hex color. It just disappears. But, as soon as I choose RGB as the color mode, it shows up down here at the bottom of the dialogue box. And of course, as I change the sliders up here, the Hex color changes down here. Or, I could simply select that, delete it, and type my own Hex color like 45FF23. InDesign automatically translates that into RGB values. Okay, so let's go ahead and click Okay, and that adds that color swatch to the Swatches panel. And now I'm gonna show you that last option. This cool add-on. Now this add-on is free, and you can download it from this website. Just go to cpn.co/g/hexswatch. That'll take you to the website, where you can download the script. This was written a long time ago, but it still seems to work in InDesign CC. And there are instructions on that website, about how to install it. And once you do, you have to Quit, and Relaunch InDesign. Then, as long as it's installed correctly, you'll have this feature in the Swatches Panel menu, New Hex Swatch. Now, there are a few reasons why you'd want to use this script. First, if you're using InDesign CS6 or earlier, you're going to need this script, because the Hex features I just showed you, aren't in older versions of InDesign. Now, there are a few reasons why you'd want to use this script. First, if you're using InDesign CS6 or earlier, you're going to need this script, because those Hex features I just showed you, aren't in the older versions of InDesign. Second, if you're using Named Web Colors, then you can type them in, right here in the Color Name field. For example, I'll click in here and type the word tomato. Then, I'll hit the Tab key, and you'll see that InDesign knows that the word tomato means this Hex color. There are a few dozen of these kinds of Web Color Names out there. You can just search the web for Web Color Names, and you'll find a list of all of them. But here is the feature inside this script, that I think is the coolest. I happen to have Photoshop running in the background. Here, I'll switch over to it. Okay, see how I have a color already set as my foreground color here in Photoshop? You can see it over here in the Color panel. Now, what if I wanna use that same color in InDesign? Well, I'm gonna go back to InDesign. And now, check this out. Look at this button. Current Photoshop Foreground Color. All I need to do is click that button, and it grabs the color from Photoshop. Okay, I admit that it's not often that I need that, but you have to admit, it's pretty slick. Anyway, now I can click Okay, and that swatch gets added to my Swatches panel, and I'm ready to keep working. So, that's it. Three ways to get a Hex color into or out of InDesign.

Contents