Color Terminology

Color theory blends scientific understanding and artistic intuition to guide the use of color in design. By delving into human psychology, optical science, and cultural influences, it offers a framework for crafting effective color palettes.

This isn't merely about aesthetic appeal; it's about using color to shape user behavior and convey the desired message. For designers, mastering color theory isn't just a skill, it's a strategic tool for communication. By using color thoughtfully, designers can create experiences that resonate with users on multiple levels.

RGB is an additive color model that uses the primary colors of light (red, green, and blue) to create all other colors. The main application of the RGB color model is to display digital images. Mixing different amounts of these colors allows digital displays to create more than 16 million colors visible to the human eye.

CMYK is the subtractive color model that uses cyan, magenta, and yellow as primary colors. CMYK stands for cyan, magenta, yellow, and key (black) colors. The "key" color can be whatever ink plate provides the most detail to the printed image. If black ink is not being used, another color can take the "key" position.

The CMYK color model is used in four-color process printing. You can produce virtually any color in the visible spectrum by adding these four colors together in varying ratios.

A hex code is a representation of how much red, green, and blue exist in a color. It's expressed as a six-digit combination of numbers and letters, preceded by a pound (#) sign. Hex color codes are used in CSS to define the color of an element.^[1]

A color palette is a carefully curated selection of colors that designers use in their compositions. These colors work in harmony to evoke specific moods, emotions, or reactions from users. The palette may include primary, secondary, and accent colors that provide contrast, balance, and thematic coherence to a design.

More complex palettes may even involve gradients or tints and shades of a base color to create a richer visual experience. The aim is to create a unified and aesthetically pleasing design that also enhances usability and readability for users.

Hue refers to the purest form of a color at full saturation, without added white, black, or gray. For example, red, blue, green, yellow, and magenta are hues.

The words “color” and “hue” are often used interchangeably in everyday use. In design, there’s a distinction: color can refer not only to hues but also to tints, shades, and tones.

Color gradients are a gradual blending from one color to another or between many colors.^[2] Gradients are often used to add interest to designs or depth to elements like buttons.

Gradients can happen within a single color (such as light green to forest green) or between different colors (red to yellow, for example). In the transitional space, many other colors are present.

Contrast refers to the differences between two objects in a composition. Contrast can be achieved in many ways, with color being one of the most obvious. Black and white, for example, have high contrast.

Contrast is also an important consideration for creating accessible designs. The contrast between text and background colors should be at least 4.5:1 for small text and 3:1 for larger text.

Opacity refers to how see-through a color is. At full opacity, color is not at all transparent. By adjusting the opacity, you allow the background to show through, whether it's another color or an image.

When a color has reduced opacity over a white background, it will appear lighter. Over a black background, it will appear darker. Opacity changes can also be used to create gradients against a background color.

A shadow, also known as a drop shadow, is a visual effect that simulates the presence of a light source to create the illusion of depth on a flat surface. By adding shadows to elements, designers can emphasize hierarchy, improve readability, and guide user focus. In the context of digital design, shadows aren't just an aesthetic choice; they serve a functional purpose by making elements appear elevated or distinct from the background, thereby enhancing user interaction and engagement.