Color

Color creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change.

Animation of an eye icon cycling through various colors with the iris changing color Animation of an eye icon cycling through various colors with the iris changing color

Bring it to life

IBM colors are vibrant and optimistic. Our palette consists of eight core colors, 80 full-spectrum colors and an array of neutrals. The colors support digital displays and maximum color contrast.

Meaning

With colors inspired by the world, IBM’s product palette is flexible to express a wide emotional range. Click on the color wheel to explore the range of meanings in our palette.

Click to explore

Back

Contrast

Contrast distinguishes words and images through a perceived difference in color. It separates elements and groupings in a layout and plays a crucial role in accommodating all types of users.

The IBM Design full-spectrum color palette contains ten grades, from 10 to 100. Black text is WCAG AA accessible on grades ranging from 10 to 50. White text is accessible on grades from 50 to 100.

An example chart of color contrast, half with black text on lighter backgrounds and half with white text on darker backgrounds An example chart of color contrast, half with black text on lighter backgrounds and half with white text on darker backgrounds

Beyond black and white text, IBM colors provide a range of accessible combinations. Subtracting the foreground color grade from the background color grade (or vice versa), helps you determine whether that color combination meets the WCAG AA contrast ratio success criterion. If the difference between two grades is above 50, the colors are accessible. Anything below a difference of 50 fails accessibility standards.

Pure App logo with a dark blue background with white and purple text on top Pure App logo with a dark blue background with white and purple text on top

70 Blue background

- 20 Purple text

50 or greater is accessible

7 horizontal lines indicating text, where the top 2 and bottom 2 lines are in a shades of purple, and the middle 3 lines are in white. 7 horizontal lines indicating text, where the top 2 and bottom 2 lines are in a shades of purple, and the middle 3 lines are in white.

Contrast is key

High color contrast helps users who are partially or completely color-blind see differences between certain colors. It creates a strong visual hierarchy and improved usability for everyone.

Context

Consider the functional and contextual application of color.

Establish obvious hierarchies

Color helps users navigate through your application. Color can be a good way to notify users or show them what to do next. The type of color, the amount of color applied and surrounding colors all affect the hierarchy in different ways.

A log in screen in gray tones with a teal log in button animating into a red log in button. A log in screen in gray tones with a teal log in button animating into a red log in button.

Warm, saturated colors draw more attention than cool, dull colors.

A bar chart with mostly blue columns and one red column that sticks out from a dark background A bar chart with mostly blue columns and one red column that sticks out from a dark background

A smaller area of saturated color alerts the eye more than a larger area of muted color.

Create relationships between like elements

Using the same color for similar elements helps users make sense of what they see. Group related content to reduce the complexity of a screen and enhance a user’s understanding. Consider the types of colors you are using when grouping objects. Avoid color combinations such as red and green, which appear too similar for users with certain color vision deficiencies.

A task list with white text on a dark background and brightly colored icons A task list with white text on a dark background and brightly colored icons

Color-coding sections reduces complexity and makes it easier to find associated tasks.

Notify, alert and remind

Color indicates a status or notification in an obvious way. An alert should be only as prominent as it is critical. It should not alarm, scare or threaten users, but instead motivate them to take action. Choose colors that correspond with the severity of the message.

Alert Colors

The combination of color, iconography and an accurate message assists users in handling situations as they arise. An issue might be critical but the visual tone should remain clear, approachable and informative.

Three separate examples of an alert in red, orange, and green Three separate examples of an alert in red, orange, and green

Status

Often color alone is not sufficient in denoting severity. Patterns or iconography can help distinguish one color from another and reduce confusion for users with color vision deficiencies. Labels can effectively communicate an error or alert and quickly get the user back into the flow.

Green and red splotches showing the colors a non-visually impared person would see

Full vision

Gray splotch showing the colors a person with achromatopsia would see

Achromatopsia

A collection of squares and rectangles forming a mosaic shape A collection of squares and rectangles forming a mosaic shape

Make a connection

Color is more than a product’s personality. It emphasizes connections between different types of content to help users make faster, more informed decisions.

Palettes

When choosing a palette, select colors that reinforce the identity of your product. Maintain consistency across designs and decrease user recognition times. A color palette limited to two or three colors helps users make fast associations with forms and elements on the screen and can make your product more usable.

Create schemes by looking at the relationships that exist between colors. The following combinations are often considered aesthetically pleasing, and can be a great starting place to develop your palette.

Monochromatic

Monochromatic color schemes are derived from a single color and its tints and shades. Designs that use a monochromatic scheme are usually more peaceful and balanced due to the lack of contrast.

A monochromatic color scheme in different shades of purple A monochromatic color scheme in different shades of purple

Analogous

Analogous color schemes are groups of colors adjacent on the color wheel. An analogous scheme feels richer than monochromatic schemes. It’s usually best to stay within warm or cool colors to maintain a consistent temperature within your design. Choosing colors with varied saturation can add contrast and liven up the palette.

An analogous color palette in blues and greens An analogous color palette in blues and greens
An analogous color palette in reds, yellows, and purples An analogous color palette in reds, yellows, and purples

Complementary

Complementary color schemes are the combination of colors opposite each other on the color wheel. Avoid complements that are the same level of saturation, which can look jarring. Choose a main color and use the complement as an accent.

A complemetary color palette in blues and oranges A complemetary color palette in blues and oranges
A complemetary color palette in purples and yellows A complemetary color palette in purples and yellows

Triadic

A triadic color scheme is made up of colors that are equally spaced around the color wheel. Because this scheme is so diverse, it is important to choose a single color to focus on and use the other colors as accent.

A triadic color palette in greens, pinks, and yellows A triadic color palette in greens, pinks, and yellows
A triadic color palette in blues, yellows, and pinks A triadic color palette in blues, yellows, and pinks
Screen using a pink and purple analogous color scheme on a grey background

Analogous example

Make data feel vital and lively with bright warm colors. This analogous palette adds humanity to an otherwise empirical visualization.

Color swatch of the purples and pinks from the analogous example screen Color swatch of the purples and pinks from the analogous example screen
Screen of a monochromatic color scheme being used in different shades of blue

Monochromatic example

Calming blue is used by itself to make the interface feel balanced and simple.

Shows a color swatch of the blues from the monochromatic example screen Shows a color swatch of the blues from the monochromatic example screen
Screen using a triadic color scheme in greens, purples, and oranges on a gray background

Triadic example

A healthy and exciting green dominates while orange and purple create variety.

Shows a color swatch of the greens, purples, and oranges from the triadic example screen Shows a color swatch of the greens, purples, and oranges from the triadic example screen
Back to top