The Importance of Luminosity In UI Design
An important component of user interface design is the choice of color palettes and swatches. When rebranding, you want to design your new UI to have that "wow" effect when people look at it, but there is an often overlooked aspect of choosing colors: luminosity.
Whenever the luminosity of two adjacent colors is very similar, those colors often clash. For example:
These bright cyan and yellow colors just don't look quite right together. In order to tweak these colors so that they go better together, you can adjust their luminosity. Luminosity is the natural lightness of a color on a screen. In tools like Sketch and Photoshop, you can add a blend mode of luminosity on your colors, (which will temporarily turn them to grayscale) and measure their luminosity. Basically, if their grayscale luminosity is very similar, that means those two colors will clash visually. (Notice in the example above the greys underneath each color are very similar). The solution is to make their luminosities different. Either reduce one or increase the other, depending on your creative liking. In order to do that, you'll have to fiddle with the brightness and saturation settings in your design software. Then, disable the blend mode and the results are a lot easier on the eye:
And, voila! This design digression was inspired by a lesson from learnui.design, which is this week's .design site spotlight winner. If you'd like to learn more, check out Erik's site.