Get a pixel perfect closeup of your design.
Sometimes, you've got to get things pixel perfect in a design. Like the days when layouts were done on acetate, it's essential to have a tool that lets you magnify your work. Enter the Loupe tool.
By default, the Loupe follows your mouse as you move it on screen, updating the popup with the color value underneath the pointer. You can quickly change the color format display by selecting another item in the popup menu. You can also toggle the
button to have the Loupe zoom the image underneath the tool (like a true magnifying glass.)The magnification level of the Loupe starts out at 800%, but you can make it as little as 200% or as much as 1600% by using the Loupe menu. The keyboard shortcuts ⌘= and ⌘- can also be used.
If you're working on a Mac with a small screen, you may find the
option useful. When turned on, the Loupe window will automatically move away from the current mouse position. This helps when you are examining a large design—it keeps the Loupe's display out of the way.The Loupe preference panel contains various options that let you format the color values according to your preferences. The default for hex colors is in lowercase with a hash mark. App colors default to the parameters used by UIColor.
A reference color can also be displayed in the Loupe using the
menu item. This allows you to work with a color in one format while viewing it in another. For example, you can work with hex colors in an HTML document while checking that the color value is the same as Photoshop's 0-255 RGB value.Finally, like the Screens tool, the Loupe can simulate how colors will appear to users with vision defects. See that tool's help for more information on the different settings. The Loupe can also be configured to display with or without the grid or center lines.
In version 4.1, the Loupe tool gained the ability to work with different color spaces using the
item in the menubar. Many apps and development environments use color management, but unfortunately there's no standardization on the color space that's used. If you need accuracy when sampling, you'll need to pay attention to which space is being used by the app that's displaying the color.The simplest way to explain this is with an example using Safari and Firefox. Both of these apps display web pages, but only Safari renders them using color management (in the sRGB color space.) Firefox presents the colors you specify in your code directly without any management.
When you specify a color in your HTML/CSS code, it will be transformed by Safari before being presented on the display. Sometimes, this color transformation will be slight and barely perceptible. At other times, it will be quite obvious. It all depends on how close the color is to the physical limits of the display (called its gamut.) Every display is different.
This means that if you use a color like rgb(123,45,67)
in your HTML/CSS code, it may appear as rgb(128,40,69)
when displayed in Safari. It can be confusing to see these color values that don't appear anywhere in your code.
After you tell xScope that you're looking at colors in the sRGB color space, it knows to apply a reverse transformation to correct the values. The end result is you'll see the color used in your source code, not the one that Safari converted for display.
Since every app supports color management differently, you'll need to adjust this setting depending on the type of work you're doing. The following table will help you set the
menu item correctly:Application | Working Color Space |
---|---|
Safari | sRGB |
Preview | sRGB |
Chrome | sRGB |
iOS Simulator | sRGB or Display P3 |
Firefox | Display RGB |
Most other OS X apps | Generic RGB |
Photoshop | Various, see below |
Xcode | Various, see below |
Previous versions of xScope always displayed color information in the Display RGB color space. Because of this, it's the default setting for the working color space.
The current display profile from System Preferences > Display > Color is also shown at the bottom of the menu. All colors sampled by the Loupe will be managed from this source color space. This information can be useful when you're trying to match your display color with another application (including Photoshop).
Photoshop allows you to configure many different color spaces using its Edit > Color Settings… window. You'll need to make sure that the setting for RGB under Working Spaces matches the setting you've chosen for xScope.
Note that if you're using Monitor RGB as your color space in Photoshop, that's equivalent to xScope's Display RGB.
If you're using Xcode to create apps, you'll need to use different color workflows depending on whether you're working on iOS or OS X. If you use the standard color picker to specify colors in Interface Builder, you'll need to pay attention to the color space being used. There is a gear icon next the RGB Sliders popup menu that lets you select the color space for any values that are entered from the panel. You'll need make sure
matches what you select in this menu.
Colors specified using NSColor's -colorWithCalibratedRed:green:blue:alpha:
will be in the Generic RGB color space. If you use -colorWithSRGBRed:green:blue:alpha:
instead, colors will be displayed in the sRGB color space.
Getting the right colors in your web or native app is a tricky subject. We recommend reading Making Sense of Color Management.