Color management doesn’t often come to mind as an essential part of website design and development — but it is!
Colors are important. Beyond their ability to convey mood or sentiment, they are a large part of portraying your brand visually and building awareness and affinity with those who interact with it. If your colors look different across displays, that can lead visitors to have an inconsistent experience with your brand and your website.
Color management ensures that the colors featured on your website look the same to every visitor. That means the same branded blue you see and choose to feature is what your visitors see. Utilizing color spaces and these best practices for common design tools will help you nail your website’s color management.
What is a Color Space?
A color space is a collection of information and data that informs how a system or device displays color to a viewer. In other words, different color spaces will portray the same color differently.
The default color space of the web is sRGB — the “s” meaning standard. Originally created by Microsoft and Hewlett-Packard in 1996, it was widely adopted for software, displays, and other website applications.
You may occasionally hear color space and color profile used interchangeably, but they are technically different.
While a color space ensures your website or display portrays colors how you want them to, a color profile is embedded in a visual asset’s metadata to have it adhere to a given color space. An asset exported to an Adobe RGB color profile will not look the same in Photoshop as on the web, which runs off the sRGB color space.
Color Management Best Practices
Set your working space and profile
Since the default color space of the web is sRGB, it stands to reason that your visual assets should also be created in sRGB. With that in mind, you should ensure that your design tool is set to the sRGB color space and that new documents are assigned an sRGB profile.
Currently, common web design tools like Figma and Sketch don’t enable users to change their color settings because they default to sRGB — which is ideal. While tools like Adobe Photoshop and Illustrator generally default to sRGB, you can check and update through “Color Settings” located in the “Edit” menu.
Your RGB working space should be set to sRGB. Additionally, you can update your color management policies to turn off preserving embedded profiles. That way, imported assets will default to the sRGB profile.
Update your monitor
While most design tools default to the sRGB space, your monitor may not. That means that even if your assets are set to sRGB, they may not appear how others will see them if your monitor is not set correctly.
Monitors come out of the box with custom color settings that often need to be adjusted. How you update these settings will depend on your monitor or operating system.
For instance, Mac users can head to their Display preferences and set their color space to sRGB.
Save for web
In addition to setting the right color space for your design tools and monitor, you can ensure that your visual assets are aligned by exporting for the web.
The “Save for Web” function in Illustrator and Photoshop offers greater control over the compression, output and metadata of the assets that you’re exporting for the web. Not only does this ensure that your assets are exporting with the preferred color profile, but it also helps you keep file size under control which can benefit your site speed.
The Future of Color on the Web
sRGB may be the current standard for color on the web, but it may not be the future. HDR or high dynamic range color, is an emerging technology that incorporates greater contrast and the ability to visualize a wider range of colors.
While modern televisions and higher-end displays have the technology to support HDR, most do not. Much like video and the emergence of higher available resolutions like 4K, the adoption of HDR color spaces will be dependent on the technology to view it becoming more universally accessible effectively.
sRGB was popularized because it was one of the few color management solutions available when it was created in 1996. It was also a low-cost and simple-to-implement space for software and hardware developers.
In order for HDR to become popularized and the new standard for web and digital design, it will require the same level of adoption by developers and users.
Print Color Management
While a lot of marketing is done digitally and on the web, print media still plays a large role in many industries. Brand consistency can be challenging when faced with how colors in your brand palette appear on the web versus how they appear in print.
The same principles for web color management apply to print. While we provided settings ideal for web design and aligning with the sRGB color space, most commercial printing is done in CMYK.
Most design tools like Photoshop and Illustrator feature conversion tools to convert your RGB colors for the web to CMYK colors for print. Updating your tool and monitor’s color space to match that of your printer will give you a good sense of what you can expect to see once printed.
That said, using a swatch book to find your brand colors under ideal lighting and human eye conditions is still the oldest trick in the book to ensure your brand colors look similar on print and on the web.
This post was originally published April 2014.
Tag(s):
Websites
