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
-
-
229 Batch converting ID files to current version with the Book panel6m 9s
-
230 Getting around InDesign limitations6m 46s
-
(Locked)
231 Creating better callout lines with effects and object styles5m 47s
-
232 Swapping column and row information in tables6m 9s
-
(Locked)
233 Making bigger text link targets4m 52s
-
-
-
161 Keeping page numbers on top of master items3m 55s
-
162 Adding automatic currency symbols in a table cell or before text3m 50s
-
(Locked)
163 Make a pop-up footnote for your ebook3m 48s
-
(Locked)
164 Deleting tabs at the beginning of paragraphs and applying a paragraph style3m 10s
-
(Locked)
165 Five InDesign Presentation tips6m 28s
-
-
-
(Locked)
111 Packaging images on the pasteboard3m 32s
-
(Locked)
112 Automatically updating figure references for books6m 9s
-
(Locked)
113 Adding Tool Tips to your form fields in InDesign3m 21s
-
(Locked)
114 Setting poetry, flush left, center on longest line3m 54s
-
(Locked)
115 Use bookmarks to navigate long documents in production4m 57s
-
(Locked)
-
-
(Locked)
107 Using the same keyboard shortcut for two different commands with the Context feature5m 22s
-
(Locked)
108 Making a text highlighter3m 33s
-
(Locked)
109 Updating an interactive PDF without losing work done in Acrobat5m 30s
-
(Locked)
110 Adding custom text at the beginning of each line automatically4m
-
(Locked)
-
-
(Locked)
089 Three great Object Styles for any designer8m 1s
-
(Locked)
090 Choosing alpha channel image transparency2m 25s
-
(Locked)
091 Adding and reading metadata for InDesign files3m 25s
-
(Locked)
092 Adding ALT tags to your images6m 59s
-
(Locked)
093 How to Place & Link a text frame's text but not its formatting7m 4s
-
(Locked)
094 Setting the baseline position of a caption2m 39s
-
(Locked)
-
-
(Locked)
051 Five things that should be in every new file5m 19s
-
(Locked)
052 Forcing EPUB page breaks with invisible objects6m 21s
-
(Locked)
053 Understanding component information6m 39s
-
(Locked)
054 Creating running heads using section markers4m 16s
-
(Locked)
055 Making a font with InDesign using the IndyFont script5m 20s
-
(Locked)
056 Finding where that color is used7m 17s
-
(Locked)
-
-
(Locked)
047 Specifying an exact amount of space between objects5m 17s
-
(Locked)
048 Fixing last lines that are too short8m 16s
-
(Locked)
049 Creating web graphics from your InDesign artwork7m 20s
-
(Locked)
050 Using “No Language” to suppress unwanted hyphenation, spell-checking, and smart quotes2m 48s
-
(Locked)
-
-
(Locked)
037 Updating a linked table without losing formatting5m 18s
-
(Locked)
038 Creating electronic sticky notes4m 49s
-
(Locked)
039 Moving master page items to the top layer for visibility2m 48s
-
(Locked)
040 Five guide tricks that will impress your coworkers6m 18s
-
(Locked)
041 Letting InDesign add the diacritics4m 21s
-
(Locked)
042 Using single-cell table cells for custom paragraph formatting6m 2s
-
(Locked)
-
-
(Locked)
027 Creating running heads using variables5m 1s
-
(Locked)
028 Live Caption tips and tricks8m 3s
-
(Locked)
029 Making professional drop caps10m 37s
-
(Locked)
030 Making two-state buttons in interactive documents5m 5s
-
(Locked)
031 Moving pages from one document to another3m 15s
-
(Locked)
032 Wrapping bulleted text around a curve5m 58s
-
(Locked)
-
-
(Locked)
007 Selecting through and into objects using cmd-click and Select Above/Below5m 46s
-
(Locked)
008 Some great tips and tricks for the Swatches panel9m 40s
-
(Locked)
009 Saving down for backward compatibility with INX and IDML5m 54s
-
(Locked)
010 Using the INX and IDML formats to fix problems4m 46s
-
(Locked)