Web designers and AI folks need to know what colors they are using. And they need to know precisely.
Bright red, Fuchsia and Mauve just won’t do. They need exacting names like: #FF0000, #FF00FF and #E0B0FF.
Since more and more folks are using Visio for prototyping web sites and user interfaces, I thought it might be useful to create a SmartShape that displays the hexadecimal color value for a particular shape.
I came up with this contraption a few months ago, but then David Parker went and wrote this rather similar post: Displaying the RGB values of Shapes, and I felt a bit sheepish about not getting this up on Visio Guy sooner.
A Visio SmartShape That Speaks Hexadecimal
The shape is quite simple to use. Just drag out a copy of it, give it a fill color, and Presto! You see the hexadecimal value of the color. It’s easy to check by using basic colors that have full red, green or blue components, like these:
If you’re not sure what the strange numbers mean, well FF is hexadecimal, or “base 16” for the number 255. The hexadecimal value is actually three values stuffed together. The left two digits represent the red-component of the color, the middle two are for green, and the last two are for blue. Each component can have a range from 0 to 255.
So you can see that red has the full red value, and 0 for green and blue. Yellow has the full value (FF) for both red and green, but no blue value.
Black, white and shades of grays are interesting, in that all three components are equal. To make a shade of gray, just make sure red = green = blue!
Using the Hex-color Shape
If you are laying out a user-interface in Visio, and come up with some color you like, just drag this shape into your drawing.
To pick up the color of some other shape, use the Format Painter 
tool to bring the colors into the Hex-color shape. Don’t worry if the font attributes for the hex-color shape change. The Format Painter has a way of “destroying” everything. What’s important is that you are able to detect the color. And those smarts will remain intact.
You can now just double-click the shape to select and copy the text for use in your other project!
How the Hex-color Visio Shape Works
If you’re into ShapeSheet development, you might be interested in how this thing works.
The intelligence behind this thing can be seen by looking at the User-defined cells section in the ShapeSheet. Take a quick look:
| User.R | = RED(FillForegnd) |
| User.hexR | = INDEX(INT(User.R/16),User.hexVals)&INDEX(INT(MODULUS(User.R,16)),User.hexVals) |
| User.G | = GREEN(FillForegnd) |
| User.hexG | = INDEX(INT(User.G/16),User.hexVals)&INDEX(INT(MODULUS(User.G,16)),User.hexVals) |
| User.B | = BLUE(FillForegnd) |
| User.hexB | = INDEX(INT(User.B/16),User.hexVals)&INDEX(INT(MODULUS(User.B,16)),User.hexVals) |
| User.hexVals | = “0;1;2;3;4;5;6;7;8;9;A;B;C;D;E;F” |
| User.text | = “#”&User.hexR&User.hexG&User.hexB |
Although it looks daunting, you can see that the first six rows break down into three groups of two rows. Each set of rows deals with a different color component:
- Red
- User.R
- User.hexR
- Green
- User.G
- User.hexG
- Blue
- User.B
- User.hexB
The R, G, B cells just get the individual red, green and blue components of the shape’s fill foreground color. These values are decimal, though, with possible values of 0-255.
Once we have the individual decimal values, we need to build two-digit hexadecimal values from them.
INT(User.R/16) gives us the left hexadecimal value, and MODULUS(User.R/16) gives us the right value (modulus returns the “remainder” of a division.) But these calculations still give us decimal values from 0 – 15. So we use the results of these two calculations to lookup the hexadecimal values stored in User.hexVals.
So let’s take the full shade of red, where the color can be defined as RGB(255,0,0).
User.R = 255
INT(255/16) = 15
MODULUS(255, 16) = 15
The INDEX function then looks for the fifteenth value in the list “0;1;2;3;4;5;6;7;8;9;A;B;C;D;E;F”. This gives us an F, which is used for both digits of the red color. Note that F is really the 16th item in the list, but the INDEX function is zero-based. So everything shifts by one, and F becomes the “15th” item in the list and 0 is the “oth” item, so to speak.
User.text just concatenates all of the r, g, b hex values together, with a leading “#”. This cell is then inserted as the text field for the shape, so you don’t have to dive into the ShapeSheet to see the result of all the calculations!
Get the Visio Hex-color Shape
You can download the stencil that contains the shape here:
Download “Visio Hex-color Shape Stencil” s!Aj0wJuswNyXlhkqdQ60Y53EWeEeF – Downloaded 4368 times – 103.00 B
Thanks for this useful tool. I am fairly new to visio and i’m struggling a bit with managing colors and themes, etc., so this is a real help. What I’d like to really be able to do is easily SET visio colors using hex. If I already have a web design and I want to get good color matching of visio graphics, what is the best workflow for doing that?
It would be great if this worked in reverse. I.e you could type the HEX value into the smart shape to derive the colour.
Hey Perp,
Great idea. I’ve actually created an updated shape that essentially goes in any direction. RGB, HEX, apply a color via the UI, etc. I just haven’t had much time to publish it!
to convert 2 hex digits to decimal: LOOKUP(high_hex_digit,”0;1;2;3;4;5;6;7;8;9;a;b;c;d;e;f”)*16+LOOKUP(low_hex_digit,”0;1;2;3;4;5;6;7;8;9;a;b;c;d;e;f”)
Nice, bradley! Compact and succinct!