Color creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change.
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.
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.
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.
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.
70 Blue background
- 20 Purple text
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.
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.
Warm, saturated colors draw more attention than cool, dull colors.
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.
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.
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.
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.
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.
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 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.
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.
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 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.
Make data feel vital and lively with bright warm colors. This analogous palette adds humanity to an otherwise empirical visualization.
Calming blue is used by itself to make the interface feel balanced and simple.
A healthy and exciting green dominates while orange and purple create variety.