![]() HEX Color Codes are a six-digit sequence, including letters or numbers, which define how much red, green, and blue a specific color contains. HEXs allow for consistency to occur within the digital realm by assigning a code to every color on the spectrum. If you were curious if systems exist at all in the creative world, look no further than the bread and butter of digital design: HEX Color Codes. Oftentimes, with creativity comes a lack of organization - it can seem surprising when someone creative has systems and processes in place that create consistency. That's a good thing - I think.Creatives are known for their ideas and vision. When introducing tools for specification, they might not only help you with delivering your designs in an easier and more convenient way, they also reveal things that were eventually made wrong before. Since even if the colors are correct, every end user might have another display color profile and therefore will see another color, this is not a big thing. This is not a huge problem, but it's good to know how it works to avoid misunderstandings. If you get the following dialog when you open a PSD, choose Discard the embedded profile. If you get a PSD and you're not sure, just disable color management via Assign Profile. They can't be wrong if they deliver PSDs or PNGs instead of JPGs. Be sure, that they use the right color management settings when creating their PSDs. Let the designer do the color code definition and let them specify it somewhere, in a Wiki, within the PSD, a PDF or with the help of a specification tool like Frontify. It's not much off with default settings, but make sure that you don't have checked "Embed color profile" for JPGs and you turned off "Convert to sRGB" when exporting (via Save for Web.) from Photoshop. In my tests, the only way to get the right result is with PNGs. As a source, they both use an uncompressed 24-bit PNG and an uncompressed JPG. But it seams to be consistent for example in Chrome (First) and FF (Second). If you look at the following example with a JPG image, you'll see that browsers output another color code (via Canvas) than with the PNG. If you're using PNGs as a source, everything is fine and you can skip this section. But this is easy to fix, you can either disable it in the settings (Edit → Color Settings, set working space for RGB to Monitor RGB ) or you can disable it for the current document after opening a PSD (Open Edit → Assign Profile and choose Don't color manage this document). If it's not disabled, one might get the wrong color codes. you disable color management for RGB files. ![]() There are also color pickers who allow you to customize the color profile and native modes, they might be a better fit for the job. On the left, I've used the Standard Color Profile and on the right, I've used the same image, but configured my display to use the Apple RGB color profile.Īs you can see, the picked color is very different to the original one, it really depends which display color profile you use. Have a look at this example from ColorSnapper on a Retina Mac. This leads to different results on other displays or other color profiles. Most of them just pick the color on the screen while respecting the color profile of your display. There are quadrillions of color pickers out there, they do their job for most of the people and where they don't, nobody cares. What are you doing to get information about a color from a design? Are you picking it? Are you using the Photoshop color picker, an OSX app or do you get it from written documentation, like a wiki or style guide? Either way, the color you've used might be wrong, at least theoretically. Before we jump into those settings, I want to talk about color picking. We told them to double-check their Photoshop color management and export settings. So, when we introduced the color picker in Frontify, some people told us, that we're showing the wrong colors in the color picker, because they saw that it's not the exact same code as they see in Photoshop. Nobody will notice the difference between #ffc600 or #ffc601, right? But for many designers, that's just not correct, technically, and the difference can be a lot more. Does it Matter?Īctually - not really in most cases. Since this can be tricky, I'm going to discuss some of the problems and tricks to help you achieve your goal. Your designer might give you a roundhouse-kick if they don't. ![]() You try to perfectly match the colors originally used in the design. ![]() When using a color on a website or app, you might think about HEX codes and RGB(A) values. ![]()
0 Comments
Leave a Reply. |