Applying color to your design can be intimidating. Even just knowing where to start. You might have a color palette ready to go, but using it effectively is another matter. We use color to support the rest of the interface design.
When you’re working with color, you usually have at least the typography and the layout in place. From there, the question becomes, where could color benefit the design? Is there anything we want to draw attention to, like interactive elements, other elements that matter less and should be deemphasized, such as footer text and meta information? Our color choices start with decisions about contrast. So why not start in gray scale?
When you work in gray scale, you can consider the hierarchy of information in your design just in shades of gray. Start with black and white, usually black content on a white background, and then you can use opacity to lower and raise the contrast of your content. Once you’re satisfied with your contrast, you can replace the grays with your chosen colors, taking care to ensure they have similar contrast levels to your original gray values, maintaining the same lightness or darkness.
You could even just keep ‘em gray. Just be sure to convert your semi-transparent values to solid values. Remove the opacity from them so they won’t change appearance when you place them on different background colors.
1:30 min