

Examples The slightly paler saturation of the letters in the header on this site create a more calming feel than pure hues would. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors. In design, colors with similar saturation levels make for more cohesive-looking designs. Saturation refers to how a hue appears under particular lighting conditions. The low chroma colors in this design contrast nicely against the black typography. The difference in chroma between the pink and dark purple on this site provides solid contrast in the design. Examples Combining a variety of hues with the same chroma creates a harmonious background pattern. Opt instead for hues with chromas that are either exactly the same or at least a few steps away from each other. In design, avoid using hues that have a similar (but not identical) chroma. Chroma can be thought of as the brightness of a color in comparison to white. It’s similar to saturation but not quite the same. Conversely, adding white, black, or gray reduces its chroma. A hue with high chroma has no black, white, or gray added to it. ChromaĬhroma refers to the purity of a color. HeadOfffice uses such a bright pure yellow hue that it’s almost difficult to look at. This site also incorporates other pure hues as the main photo changes. Pure red is a very popular hue in Web design. Examples Using a lot of pure hues together can add a fun and playful look to a design, as done in the design of this website.
