Making Sense of Color Management
()
About this ebook
Get clarity in the tricky endeavor of managing colors from initial design to final product. Learn why colors shift, the science behind the human eye and color profiles, and how to set up your image editor and development environment for consistent color. Craig Hockenberry takes you through every step of color management, with indispensable advic
Craig Hockenberry
Craig Hockenberry has been making software since 1976 and built his first website at 14.4 kilobits per second. He's a principal at the Iconfactory, a company that's been changing the face of our computers for over twenty years. His writing has helped many fellow developers in their work, and that makes him happy. So does a Manhattan.
Related to Making Sense of Color Management
Related ebooks
The Illustrator's Guide To Procreate: How to make digital art on your iPad Rating: 4 out of 5 stars4/5Digital Magazine Design: with Case Studies Rating: 0 out of 5 stars0 ratingsUsing Graphics In Books: The Reflowable Edition Rating: 1 out of 5 stars1/5Design Mastery: Principles of Page Layout and Typography for Beginners Rating: 0 out of 5 stars0 ratingsDigital Collage with Procreate: Create Beautiful Mixed Media Art on Your iPad Rating: 0 out of 5 stars0 ratingsThe Graphic Designer's Handbook Mastering the Essential Skills for Success: Design & Technology, #2 Rating: 0 out of 5 stars0 ratingsIf Paintings Could Talk Rating: 0 out of 5 stars0 ratingsDreaming in Color: A Kids Guide to Becoming an Artist Rating: 0 out of 5 stars0 ratingsThe Elements of Drawing, in Three Letters to Beginners Rating: 0 out of 5 stars0 ratingsBeginner’s Guide to Society6: How to Sell Graphic Designed Products & Create Passive Income With Society6 Rating: 0 out of 5 stars0 ratingsCrafting Your Creativity Rating: 0 out of 5 stars0 ratingsBook Design Made Simple Rating: 0 out of 5 stars0 ratingsThe Illustration of Books: A Manual for the Use of Students, Notes for a Course of Lectures at the Slade School, University College Rating: 0 out of 5 stars0 ratingsSome Tips For Developing Your Own Art Style Rating: 0 out of 5 stars0 ratingsDare to Create!: 35 Challenges to Boost Your Creative Practice Rating: 3 out of 5 stars3/5Designing for Print Rating: 0 out of 5 stars0 ratingsCanvas And Color - Exploring Painting Techniques Rating: 0 out of 5 stars0 ratingsEmerging Scholar: Gratitude of an Award Recipient Rating: 0 out of 5 stars0 ratingsA New Program for Graphic Design Rating: 0 out of 5 stars0 ratingsArtprompts Rating: 0 out of 5 stars0 ratingsThe Universal Guide to Gestalt Design Principles in Art and Photography Rating: 0 out of 5 stars0 ratingsStudio Seeing: A Practical Guide to Drawing, Painting, and Perception Rating: 0 out of 5 stars0 ratingsSustainable Graphic Design: Tools, Systems and Strategies for Innovative Print Design Rating: 0 out of 5 stars0 ratingsPaint to Prosper: Transform Your Art Practice and Build a Modern Art Business Rating: 0 out of 5 stars0 ratingsFraming Art On A Budget: The Modern Artist's Handbook, #4 Rating: 0 out of 5 stars0 ratingsPractical Font Design With FontLab 5 Rating: 0 out of 5 stars0 ratingsA Few Minutes of Design: 52 Activities to Spark Your Creativity Rating: 0 out of 5 stars0 ratingsThe 30-Day Sketchbook Project: Daily Exercises and Prompts to Fill Pages, Improve Your Art and Explore Your Creativity Rating: 0 out of 5 stars0 ratingsThe Freelance Illustrator: Freelance Jobs and Their Profiles, #6 Rating: 5 out of 5 stars5/5
Internet & Web For You
Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Coding For Dummies Rating: 5 out of 5 stars5/5No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5The Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5The Gothic Novel Collection Rating: 5 out of 5 stars5/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5Mike Meyers' CompTIA Security+ Certification Guide, Third Edition (Exam SY0-601) Rating: 5 out of 5 stars5/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsEverybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5Beginner's Guide To Starting An Etsy Print-On-Demand Shop Rating: 0 out of 5 stars0 ratingsThe $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Kill All Normies: Online Culture Wars From 4Chan And Tumblr To Trump And The Alt-Right Rating: 3 out of 5 stars3/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsGet Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsPodcasting For Dummies Rating: 4 out of 5 stars4/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5Wireless Hacking 101 Rating: 5 out of 5 stars5/5HTML in 30 Pages Rating: 5 out of 5 stars5/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5More Porn - Faster!: 50 Tips & Tools for Faster and More Efficient Porn Browsing Rating: 3 out of 5 stars3/5Tor and the Dark Art of Anonymity Rating: 5 out of 5 stars5/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5
Related categories
Reviews for Making Sense of Color Management
0 ratings0 reviews
Book preview
Making Sense of Color Management - Craig Hockenberry
FOREWORD
EARLY IN MY CAREER,
I worked as a graphic designer dealing mostly with print. Getting color right wasn’t easy, but it was completely under my control as a designer, because I could target the output. I’d go to the print shop, examine the first copies off the press, and if they looked good, I’d feel confident that the whole print run would look the same.
Now with digital designs, we have no control over the output platform. Thousands of different displays are in use, and our work might appear on any or all of them.
Getting colors right? Here are a few scenarios: a graphic image and CSS background color should match exactly, but they don’t. Or they do match on some devices, but not on others. Or they don’t match on any devices, and good luck identifying the cause. It’s enough to drive one back to vintage Macs that only display black and white.
When I encounter a color mismatch, I deal with it like so (a tactic I suspect many of you take too): fiddle with various color settings in image editing software and source code until it works out, and hope to remember the magic recipe the next time the problem happens. (There is always a next time.)
Craig did something different. In this book, he takes a step back to truly understand how color management actually works. Better yet, he shares that complex knowledge in a clear, immediate way. He tells us not just what to do, but why. Craig effortlessly guides us through the principles and practice of color management; as I read, I kept thinking, Well, that’s actually pretty simple—a big realization given I’d treated the subject as a dark art for fifteen years.
Color computing has never been easy. Our computers are almost unimaginably more powerful than those from years past, but designers and programmers have never stopped pushing the limits of our hardware. The goal has always been the same: to make what appears on screen look as good as it possibly can. Thanks to Craig, it’s now a little easier to achieve.
—John Gruber
INTRODUCTION
STEP INTO THE TELEVISION SECTION
of any electronics store, and you’ll see how widely colors can vary from screen to screen. You’ll see how many colors are generated by the exact same red, green, and blue (RGB) values—each TV gets the same digital broadcast, yet there’s a huge range in the displayed images. Color management lets us describe those differences, and correct them.
I dug into the guts of color management when I wrote xScope, my development tool for sampling and measuring colors. Back then, I didn’t really understand Photoshop’s mechanisms for handling color; I went and set some levers, which worked most of the time. But when xScope’s colors appeared one way in Safari and another in Chrome, I didn’t know which controls were responsible. I did know the problem was with color management.
If you’ve been in the business awhile, this confusion over color probably sounds familiar, and I began this book as a means to share what I’ve learned in understanding my color issues. In the coming chapters, I’ll run through some experiments to show how color works, why colors shift in different environments, and ways to keep those colors consistent.
As conscientious developers, we want to create things that look good anywhere. Just as responsive design lets layouts adapt to variety, color management lets colors and images adjust to their device and presentation.
With knowledge of color management, you’ll gain more confidence as you adjust the settings in your image editor, and you’ll be able to create products that look better for more people. Everyone wins.
Chapter 1: Coping With ColorsYOU JUST GOT A GIG
to design a website for an optometrist, Dr. Eyeful. Sweet!
The doctor wants you to use his two favorite colors: red and purple. (Bonus points if you include a site
and sight
pun in the tagline.)
You’ve been developing sites since the days of web-safe color palettes. By picking red, green, and blue (RGB) values of (255, 0, 0) and (102, 0, 204), you’ll satisfy the doctor’s branding requirements while working with tried-and-true colors. Of course, you’re careful to use those exact color specifications in both your Photoshop document and CSS styles.
But when you load the page in your browser, you see a weird color shift in the header (FIG 1.1).
Other browsers show a similar color shift, until you look at the page on your tablet—and it’s perfect! What the heck?
After a bit of surfing, you find a site that recommends specifying something called sRGB in Photoshop. You don’t know exactly what that means, but you tweak things and save a new graphic file. It fixes the problem in Safari, but the color is still off in Chrome. No matter what you do, you can’t get the CSS and image colors to match.
This inconsistency bugs you. The doctor may have questionable taste in colors, but his eyesight is perfect. He’s going to see these shifts and ask what’s happening.
Problem is, you really have no clue.
WHAT IS COLOR MANAGEMENT?
At the most basic level, color management is a way to specify the range of colors a device can represent.
Many designers and developers, including your author, have found ways to wrangle color without truly understanding the underlying technology. We’ve leaned on simple standards, choosing three bytes of data for the primary colors of light: red, green, and blue. When we specified R=255, G=0, and B=0, we expected—and could expect—to see red on our displays. We could pretty much ignore anything else about color, whether we were designing for the web or a native app.
This worked for a time, but as you saw with Dr. Eyeful, our basic RGB values don’t translate the same way across devices. To find out why, let’s take a quick trip through history.
FigureFIG 1.1: The site header is