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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
161 Keeping page numbers on top of master items3m 55s
-
162 Adding automatic currency symbols in a table cell or before text3m 50s
-
163 Make a pop-up footnote for your ebook3m 48s
-
164 Deleting tabs at the beginning of paragraphs and applying a paragraph style3m 10s
-
165 Five InDesign Presentation tips6m 28s
-
-
-
089 Three great Object Styles for any designer8m 1s
-
090 Choosing alpha channel image transparency2m 25s
-
091 Adding and reading metadata for InDesign files3m 25s
-
092 Adding ALT tags to your images6m 59s
-
093 How to Place & Link a text frame's text but not its formatting7m 4s
-
094 Setting the baseline position of a caption2m 39s
-
-
-
051 Five things that should be in every new file5m 19s
-
052 Forcing EPUB page breaks with invisible objects6m 21s
-
053 Understanding component information6m 39s
-
054 Creating running heads using section markers4m 16s
-
055 Making a font with InDesign using the IndyFont script5m 20s
-
056 Finding where that color is used7m 17s
-
-
-
037 Updating a linked table without losing formatting5m 18s
-
038 Creating electronic sticky notes4m 49s
-
039 Moving master page items to the top layer for visibility2m 48s
-
040 Five guide tricks that will impress your coworkers6m 18s
-
041 Letting InDesign add the diacritics4m 21s
-
042 Using single-cell table cells for custom paragraph formatting6m 2s
-