{
"componentChunkName": "component---src-pages-color-mdx",
"path": "/color/",
"result": {"pageContext":{"frontmatter":{"title":"Color","description":"The IBM Color palette is blue at the core, expanding across color families and gradients, using specifications to represent mankind and machine in action."},"relativePagePath":"/color.mdx","titleType":"append","MdxNode":{"id":"c7540942-e14c-5bc9-a7ac-53a93c5cf53f","children":[],"parent":"563c34ab-9d99-51fc-b90b-b77d5a623706","internal":{"content":"---\ntitle: Color\ndescription:\n The IBM Color palette is blue at the core, expanding across color families and\n gradients, using specifications to represent mankind and machine in action.\n---\n\nimport Carousel from '../components/Carousel';\nimport SwatchPaletteWidget from '../components/SwatchPaletteWidget';\nimport ColorGrid from '../components/ColorGrid';\n\n\n\nOur color palette expands on our unique aesthetic and represents a contemporary\nand ever-changing IBM. Balancing mankind and machine, the colors are harmonious\nwith nature, yet chosen for their luminous quality in the digital world.\n\n\n\n\n Blue at the core\n Specifications\n Color families\n Gradients\n Color in UI\n Accessibility\n Color in action\n\n\n## Resources\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n \n\n
\n\n## Blue at the core\n\nA vibrant set of blues is the centerpoint of the color palette. When combined\nwith the simplicity of black and white, a refreshing and unique look emerges for\nIBM.\n\n\n \n \n\n\n\n \n \n\n\n\n \n
\n \n \n
\n\n### The palette\n\nThe full palette extends from the blue family to the edges of the blue\nspectrum—even the reds contain a hint of blue. The resulting palette is a set of\ncolors that portrays a singular IBM. Of the world and digital. Useful and\njudicious.\n\n\n \n \n \n \n \n \n \n
\n\n### Grays\n\nHaving multiple gray families gives each design the opportunity for nuance and\nmeaningful moments of color. Each experience should be dominated by the grays\nand the core colors of black, white, and the blue family, allowing the other\ncolor families to have vibrancy and provide purpose.\n\n\n \n \n \n
\n\n## Specifications\n\nEach of the 10-color families have been divided into 10 swatches ranging from\nlight to dark. RGB and HEX values are provided for digital applications along\nwith Pantone® and CMYK values for print.\n\n\n\n## Color families\n\nThe color palette has been organized into four distinct 4-color families, each\ncontaining the IBM core blue. When creating color groups for your particular\nusage and application, you may combine any of the colors within these families.\nWhen fewer colors are required, you may further subdivide any of the 4-color\nfamilies into 1-color, 2-color or 3-color families. See the possible\ncombinations below.\n\n### 4-color\n\n\n\n\n\n\n\n\n### 3-color\n\n\n\n\n\n\n\n\n### 2-color\n\n\n\n\n\n\n\n\n### 1-color\n\n\n\n\n\n\n\n\n### Combinations to avoid\n\nThe following color combinations have been eliminated from the color families\nand should be avoided unless required for specific applications, such as data\nvisualization.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Gradients\n\nUse combinations within any of the acceptable 2-color families when blending\ngradients. Values between 30 and 60 are used to create vibrant gradients that\nwork well against both dark and light backgrounds. For more contrast or\nsubtlety, blend between darker or lighter colors. Do not blend between colors\nthat are more than two steps away from each other.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Color in UI\n\nApplication of the IBM color palette brings an unified and recognizable\nconsistency to IBM’s vast array of digital products and interfaces. This\nconsistency is grounded by a set of well-defined rules on how to work with our\ncomponent library in the context of dark and light themes.\n\n\n\n\n\n\n\n\n### Specifications\n\nThe neutral gray family is dominant in our UI, making use of subtle shifts in\nvalue to help organize content into distinct zones. The core blue family has\nbeen designated as the primary action color across all products and experiences,\nensuring our color aesthetic is a part of every interaction. Additional colors\nare used sparingly and purposefully.\n\n\n\n\n\n \n\n\n\n \n\n
\n\n## Accessibility\n\nColor plays a key role in legibility regardless of the medium and\napplication—think of motion graphics in videos, social content, data\nvisualization charts, user interfaces and more. When colors are insufficiently\ndistinct, whether in brightness or difference in hue, low-vision users might\nhave difficulty discerning letters and graphical elements. Don’t let poor color\nchoices stand between your design’s message and a good user experience.\n\n### Contrast ratios\n\nContrast is the difference in brightness between any two elements. The\n[Web Content Acessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG20/) set\nspecific ratios that achieve the minimum required contrast for legibility.\nGenerally speaking, small text is any size below 24px and requires a 4.5:1\ncontrast ratio. Large text is anything above 24px and requires a 3:1 contrast\nratio. Graphical elements, such as charts in data visualization, also require a\n3:1 contrast ratio.\n\nThe IBM palette is comprised of twelve color grades—Black, White and ten values\nfor each hue. When determining contrast ratios, it’s useful to assess how many\ncolor grades or “steps” are between the foreground and background colors. Steps\nimply the distance between any two colors when arranged sequentially. For\nexample, a color grade of 60 is five steps away from a color grade of 10. The\nfollowing table indicates the minimum number of steps required to achieve\ncommonly used contrast ratios between any two colors.\n\n\n\n\n\n\n\n\n\n\n
\n\n| Color 1 | Color 2 (4.5:1 contrast) | Color 2 (3:1 contrast) |\n| ------- | -------------------------- | -------------------------- |\n| Black | 50 through White (6 steps) | 60 through White (5 steps) |\n| 100 | 50 through White (5 steps) | 60 through White (4 steps) |\n| 90 | 50 through White (4 steps) | 60 through White (3 steps) |\n| 80 | 40 through White (4 steps) | 50 through White (3 steps) |\n| 70 | 30 through White (4 steps) | 40 through White (3 steps) |\n| 60 | 10 through White (4 steps) | 20 through White (4 steps) |\n| 50 | 90 through Black (4 steps) | 80 through Black (3 steps) |\n| 40 | 80 through Black (4 steps) | 70 through Black (3 steps) |\n| 30 | 70 through Black (4 steps) | 70 through Black (4 steps) |\n| 20 | 70 through Black (5 steps) | 60 through Black (4 steps) |\n| 10 | 60 through Black (5 steps) | 50 through Black (4 steps) |\n| White | 60 through Black (6 steps) | 50 through Black (5 steps) |\n\n### Contrast with gradients\n\nWhen any part of a page's background is made up of a gradient, always confirm\nsufficient text contrast against the lowest-contrast gradient colors. For\ninstance, if a gradient goes from Blue 50 to Teal 40, white text would be\nchecked against the lighter color (Teal 40) while black text would be checked\nagainst the darker color (Blue 50). Such a contrast check should happen\nregardless of the text's current position relative to the area affected by the\ngradient space. This is because authors cannot predict where text may appear\nrelative to the gradient background, due to some user preferences. WCAG requires\na page to continue to meet accessibility requirements even if a user resizes\ntext or alters text spacing within certain ranges. The text may well end up on\ntop of the lowest-contrast gradient color, so the author must verify that the\ntext contrast minimum is still met. The same is also true of 3:1 non-text\ncontrast requirements.\n\n### Examples\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Color blindness\n\nDon’t rely on color alone to convey meaning. This rule includes conveying\ninformation, indicating an action, prompting the user for a response or\ndistinguishing one visual element from another.\n\nThose people affected by protanopia color blindness are less sensitive to red\nlight, while sufferers of deuteranopia have the same problem with green. For\nexample, people with protanopia will confuse blue and purple because they can’t\nrecognize the red element of the color purple. The third type of color\ndeficiency, tritanopia, is the least common and refers to sufferers who struggle\nto distinguish blue or yellow light. This image shows what the rainbow may look\nlike to individuals with each of these forms of color blindness, compared to\nnormal vision.\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n## Color in action\n\nSee the IBM color palette in action across multiple business units and\napplications. Deliberate hits of color are composed with rich neutrals for a\nwell-balanced and cohesive experience.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n\n\n\n \n \n
\n","type":"Mdx","contentDigest":"c014180da1e03e34d6cdff73a3072c7d","owner":"gatsby-plugin-mdx","counter":1908},"frontmatter":{"title":"Color","description":"The IBM Color palette is blue at the core, expanding across color families and gradients, using specifications to represent mankind and machine in action."},"exports":{},"rawBody":"---\ntitle: Color\ndescription:\n The IBM Color palette is blue at the core, expanding across color families and\n gradients, using specifications to represent mankind and machine in action.\n---\n\nimport Carousel from '../components/Carousel';\nimport SwatchPaletteWidget from '../components/SwatchPaletteWidget';\nimport ColorGrid from '../components/ColorGrid';\n\n\n\nOur color palette expands on our unique aesthetic and represents a contemporary\nand ever-changing IBM. Balancing mankind and machine, the colors are harmonious\nwith nature, yet chosen for their luminous quality in the digital world.\n\n\n\n\n Blue at the core\n Specifications\n Color families\n Gradients\n Color in UI\n Accessibility\n Color in action\n\n\n## Resources\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n \n\n
\n\n## Blue at the core\n\nA vibrant set of blues is the centerpoint of the color palette. When combined\nwith the simplicity of black and white, a refreshing and unique look emerges for\nIBM.\n\n\n \n \n\n\n\n \n \n\n\n\n \n
\n \n \n
\n\n### The palette\n\nThe full palette extends from the blue family to the edges of the blue\nspectrum—even the reds contain a hint of blue. The resulting palette is a set of\ncolors that portrays a singular IBM. Of the world and digital. Useful and\njudicious.\n\n\n \n \n \n \n \n \n \n
\n\n### Grays\n\nHaving multiple gray families gives each design the opportunity for nuance and\nmeaningful moments of color. Each experience should be dominated by the grays\nand the core colors of black, white, and the blue family, allowing the other\ncolor families to have vibrancy and provide purpose.\n\n\n \n \n \n
\n\n## Specifications\n\nEach of the 10-color families have been divided into 10 swatches ranging from\nlight to dark. RGB and HEX values are provided for digital applications along\nwith Pantone® and CMYK values for print.\n\n\n\n## Color families\n\nThe color palette has been organized into four distinct 4-color families, each\ncontaining the IBM core blue. When creating color groups for your particular\nusage and application, you may combine any of the colors within these families.\nWhen fewer colors are required, you may further subdivide any of the 4-color\nfamilies into 1-color, 2-color or 3-color families. See the possible\ncombinations below.\n\n### 4-color\n\n\n\n\n\n\n\n\n### 3-color\n\n\n\n\n\n\n\n\n### 2-color\n\n\n\n\n\n\n\n\n### 1-color\n\n\n\n\n\n\n\n\n### Combinations to avoid\n\nThe following color combinations have been eliminated from the color families\nand should be avoided unless required for specific applications, such as data\nvisualization.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Gradients\n\nUse combinations within any of the acceptable 2-color families when blending\ngradients. Values between 30 and 60 are used to create vibrant gradients that\nwork well against both dark and light backgrounds. For more contrast or\nsubtlety, blend between darker or lighter colors. Do not blend between colors\nthat are more than two steps away from each other.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Color in UI\n\nApplication of the IBM color palette brings an unified and recognizable\nconsistency to IBM’s vast array of digital products and interfaces. This\nconsistency is grounded by a set of well-defined rules on how to work with our\ncomponent library in the context of dark and light themes.\n\n\n\n\n\n\n\n\n### Specifications\n\nThe neutral gray family is dominant in our UI, making use of subtle shifts in\nvalue to help organize content into distinct zones. The core blue family has\nbeen designated as the primary action color across all products and experiences,\nensuring our color aesthetic is a part of every interaction. Additional colors\nare used sparingly and purposefully.\n\n\n\n\n\n \n\n\n\n \n\n
\n\n## Accessibility\n\nColor plays a key role in legibility regardless of the medium and\napplication—think of motion graphics in videos, social content, data\nvisualization charts, user interfaces and more. When colors are insufficiently\ndistinct, whether in brightness or difference in hue, low-vision users might\nhave difficulty discerning letters and graphical elements. Don’t let poor color\nchoices stand between your design’s message and a good user experience.\n\n### Contrast ratios\n\nContrast is the difference in brightness between any two elements. The\n[Web Content Acessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG20/) set\nspecific ratios that achieve the minimum required contrast for legibility.\nGenerally speaking, small text is any size below 24px and requires a 4.5:1\ncontrast ratio. Large text is anything above 24px and requires a 3:1 contrast\nratio. Graphical elements, such as charts in data visualization, also require a\n3:1 contrast ratio.\n\nThe IBM palette is comprised of twelve color grades—Black, White and ten values\nfor each hue. When determining contrast ratios, it’s useful to assess how many\ncolor grades or “steps” are between the foreground and background colors. Steps\nimply the distance between any two colors when arranged sequentially. For\nexample, a color grade of 60 is five steps away from a color grade of 10. The\nfollowing table indicates the minimum number of steps required to achieve\ncommonly used contrast ratios between any two colors.\n\n\n\n\n\n\n\n\n\n\n
\n\n| Color 1 | Color 2 (4.5:1 contrast) | Color 2 (3:1 contrast) |\n| ------- | -------------------------- | -------------------------- |\n| Black | 50 through White (6 steps) | 60 through White (5 steps) |\n| 100 | 50 through White (5 steps) | 60 through White (4 steps) |\n| 90 | 50 through White (4 steps) | 60 through White (3 steps) |\n| 80 | 40 through White (4 steps) | 50 through White (3 steps) |\n| 70 | 30 through White (4 steps) | 40 through White (3 steps) |\n| 60 | 10 through White (4 steps) | 20 through White (4 steps) |\n| 50 | 90 through Black (4 steps) | 80 through Black (3 steps) |\n| 40 | 80 through Black (4 steps) | 70 through Black (3 steps) |\n| 30 | 70 through Black (4 steps) | 70 through Black (4 steps) |\n| 20 | 70 through Black (5 steps) | 60 through Black (4 steps) |\n| 10 | 60 through Black (5 steps) | 50 through Black (4 steps) |\n| White | 60 through Black (6 steps) | 50 through Black (5 steps) |\n\n### Contrast with gradients\n\nWhen any part of a page's background is made up of a gradient, always confirm\nsufficient text contrast against the lowest-contrast gradient colors. For\ninstance, if a gradient goes from Blue 50 to Teal 40, white text would be\nchecked against the lighter color (Teal 40) while black text would be checked\nagainst the darker color (Blue 50). Such a contrast check should happen\nregardless of the text's current position relative to the area affected by the\ngradient space. This is because authors cannot predict where text may appear\nrelative to the gradient background, due to some user preferences. WCAG requires\na page to continue to meet accessibility requirements even if a user resizes\ntext or alters text spacing within certain ranges. The text may well end up on\ntop of the lowest-contrast gradient color, so the author must verify that the\ntext contrast minimum is still met. The same is also true of 3:1 non-text\ncontrast requirements.\n\n### Examples\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Color blindness\n\nDon’t rely on color alone to convey meaning. This rule includes conveying\ninformation, indicating an action, prompting the user for a response or\ndistinguishing one visual element from another.\n\nThose people affected by protanopia color blindness are less sensitive to red\nlight, while sufferers of deuteranopia have the same problem with green. For\nexample, people with protanopia will confuse blue and purple because they can’t\nrecognize the red element of the color purple. The third type of color\ndeficiency, tritanopia, is the least common and refers to sufferers who struggle\nto distinguish blue or yellow light. This image shows what the rainbow may look\nlike to individuals with each of these forms of color blindness, compared to\nnormal vision.\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n## Color in action\n\nSee the IBM color palette in action across multiple business units and\napplications. Deliberate hits of color are composed with rich neutrals for a\nwell-balanced and cohesive experience.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n\n\n\n \n \n
\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/color.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}