Color

Our color palette expands on our unique aesthetic and represents a contemporary and ever-changing IBM. Balancing mankind and machine, the colors are harmonious with nature, yet chosen for their luminous quality in the digital world.

Resources

Blue at the core

A vibrant set of blues is the centerpoint of the color palette. When combined with the simplicity of black and white, a refreshing and unique look emerges for IBM.

The palette

The full palette extends from the blue family to the edges of the blue spectrum—even the reds contain a hint of blue. The resulting palette is a set of colors that portrays a singular IBM. Of the world and digital. Useful and judicious.

Grays

Having multiple gray families gives each design the opportunity for nuance and meaningful moments of color. Each experience should be dominated by the grays and the core colors (black, white, and the blue family), allowing the other color families to have vibrancy and provide purpose.

Specifications

Each of the 10 color families have been divided into 10 swatches ranging from light to dark. RGB and HEX values are provided for digital appliations along with Pantone and CMYK values for print.

red 1002d0709
red 90520408
red 80750e13
red 70a2191f
red 60da1e28
red 50fa4d56
red 40ff8389
red 30ffb3b8
red 20ffd7d9
red 10fff1f1
magenta 1002a0a18
magenta 90510224
magenta 80740937
magenta 709f1853
magenta 60d12771
magenta 50ee5396
magenta 40ff7eb6
magenta 30ffafd2
magenta 20ffd6e8
magenta 10fff0f7
purple 1001c0f30
purple 9031135e
purple 80491d8b
purple 706929c4
purple 608a3ffc
purple 50a56eff
purple 40be95ff
purple 30d4bbff
purple 20e8daff
purple 10f6f2ff
blue 100001141
blue 90001d6c
blue 80002d9c
blue 700043ce
blue 600f62fe
blue 504589ff
blue 4078a9ff
blue 30a6c8ff
blue 20d0e2ff
blue 10edf5ff
cyan 100061727
cyan 90012749
cyan 80003a6d
cyan 7000539a
cyan 600072c3
cyan 501192e8
cyan 4033b1ff
cyan 3082cfff
cyan 20bae6ff
cyan 10e5f6ff
teal 100081a1c
teal 90022b30
teal 80004144
teal 70005d5d
teal 60007d79
teal 50009d9a
teal 4008bdba
teal 303ddbd9
teal 209ef0f0
teal 10d9fbfb
green 100071908
green 90022d0d
green 80044317
green 700e6027
green 60198038
green 5024a148
green 4042be65
green 306fdc8c
green 20a7f0ba
green 10defbe6
black000000
cool gray 100121619
cool gray 9021272a
cool gray 80343a3f
cool gray 704d5358
cool gray 60697077
cool gray 50878d96
cool gray 40a2a9b0
cool gray 30c1c7cd
cool gray 20dde1e6
cool gray 10f2f4f8
whiteffffff
black000000
gray 100161616
gray 90262626
gray 80393939
gray 70525252
gray 606f6f6f
gray 508d8d8d
gray 40a8a8a8
gray 30c6c6c6
gray 20e0e0e0
gray 10f4f4f4
whiteffffff
black000000
warm gray 100171414
warm gray 90272525
warm gray 803c3838
warm gray 70565151
warm gray 60736f6f
warm gray 508f8b8b
warm gray 40ada8a8
warm gray 30cac5c4
warm gray 20e5e0df
warm gray 10f7f3f2
whiteffffff

Color families

The color palette has been organized into four distinct 4-Color families, each containing the IBM core blue. When creating color groups for your particular usage and application, you may combine any of the colors within these families. When fewer colors are required, you may further subdivide any of the 4-Color families into 1, 2 or 3 Color families. See the possible combinations below.

4-Color

4 color

3-Color

3 color

2-Color

2 color

1-Color

1 color

Combinations to avoid

The following color combinations have been eliminated from the Color families and should be avoided unless required for specific appliations such as Data Visualization.

Do not mix greens with reds, magentas or purples.

Do not mix teals with reds or magentas.

Gradients

Use combinations within any of the acceptable 2-Color families when blending gradients. Values between 30 and 60 are used to create vibrant gradients that work well against both dark and light backgrounds. For more contrast or subtlety, blend between darker or lighter colors. Do not blend between colors that are more than two steps away from each other.

Gradients

Do not mix colors that are outside of the accepted 2-Color Families.

Do not blend between colors that are more than 2 steps away, i.e. Blue 60 to Teal 20.

Do not create gradients with more than two colors.

Color in UI

Application of the IBM color palette brings an unified and recognizable consistency to IBM’s vast array of digital products and interfaces. This consistency is grounded by a set of well-defined rules on how to work with our component library in the context of dark and light themes.

introduction

Specifications

The Neutral Gray family is dominant in our UI, making use of subtle shifts in value to help organize content into distinct zones. The Core Blue family has been designated as the primary action color across all products and experiences, ensuring our color aesthetic is a part of every interaction. Additional colors are used sparingly and purposefully.

black000000
blue 100001141
blue 90001d6c
blue 80002d9c
blue 700043ce
blue 600f62fe
blue 504589ff
blue 4078a9ff
blue 30a6c8ff
blue 20d0e2ff
blue 10edf5ff
whiteffffff
black000000
gray 100161616
gray 90262626
gray 80393939
gray 70525252
gray 606f6f6f
gray 508d8d8d
gray 40a8a8a8
gray 30c6c6c6
gray 20e0e0e0
gray 10f4f4f4
whiteffffff
alert 60da1e28
alert 5024a148
alert 40ff832b
alert 20f1c21b

Color in action

See the IBM Design color palette in action across multiple business units and applications. Deliberate hits of color are composed with rich neutrals for a well-balanced and cohesive experience.

color-in-action-books
color-in-action-mobile
color-in-action-exhibit
color-in-action-tablet
color-in-action-charts
color-in-action-landing
color-in-action-icons
color-in-action-leadspace
color-in-action-tablet-2