{
"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\n\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, 2 or 3 Color families. See the possible combinations below.\n\n### 4-Color\n\n\n\n### 3-Color\n\n\n\n### 2-Color\n\n\n\n### 1-Color\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\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 application—think\nof motion graphics in videos, social content, data visualization charts, user\ninterfaces and more. When colors are insufficiently distinct, whether in\nbrightness or difference in hue, low-vision users might have difficulty discerning\nletters and graphical elements. Don’t let poor color choices stand between your \ndesign’s message and a good user experience.\n\n### Contrast ratios\n\nContrast is the difference in brightness between any two elements. The [Web \nContent Acessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG20/) set specific ratios that achieve the\nminimum required contrast for legibility. Generally speaking, small text is any\nsize below 24px and requires a 4.5:1 contrast ratio. Large text is anything above\n24px and requires a 3:1 contrast ratio. Graphical elements, such as charts in\ndata visualization, also require a 3:1 contrast ratio.\n\nThe IBM palette is comprised of twelve color grades—Black, White and ten\nvalues for each hue. When determining contrast ratios, it’s useful to assess how\nmany color grades or “steps” are between the foreground and background\ncolors. Steps imply the distance between any two colors when arranged\nsequentially. For example, a color grade of 60 is five steps away from a color\ngrade of 10. The following table indicates the minimum number of steps\nrequired to achieve commonly 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 sufficient text contrast against the lowest-contrast gradient colors. For instance, if a gradient goes from Blue 50 to Teal 40, white text would be checked against the lighter color (Teal 40) while black text would be checked against the darker color (Blue 50). Such a contrast check should happen regardless of the text's current position relative to the area affected by the gradient space. This is because authors cannot predict where text may appear relative to the gradient background, due to some user preferences. WCAG requires a page to continue to meet accessibility requirements even if a user resizes text or alters text spacing within certain ranges. The text may well end up on top of the lowest-contrast gradient color, so the author must verify that the text contrast minimum is still met. The same is also true of 3:1 non-text contrast 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\ncan’t recognize 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 Design 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","type":"Mdx","contentDigest":"72639e854a5f1c3008db2f1c493e0f50","owner":"gatsby-plugin-mdx","counter":1901},"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\n\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, 2 or 3 Color families. See the possible combinations below.\n\n### 4-Color\n\n\n\n### 3-Color\n\n\n\n### 2-Color\n\n\n\n### 1-Color\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\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 application—think\nof motion graphics in videos, social content, data visualization charts, user\ninterfaces and more. When colors are insufficiently distinct, whether in\nbrightness or difference in hue, low-vision users might have difficulty discerning\nletters and graphical elements. Don’t let poor color choices stand between your \ndesign’s message and a good user experience.\n\n### Contrast ratios\n\nContrast is the difference in brightness between any two elements. The [Web \nContent Acessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG20/) set specific ratios that achieve the\nminimum required contrast for legibility. Generally speaking, small text is any\nsize below 24px and requires a 4.5:1 contrast ratio. Large text is anything above\n24px and requires a 3:1 contrast ratio. Graphical elements, such as charts in\ndata visualization, also require a 3:1 contrast ratio.\n\nThe IBM palette is comprised of twelve color grades—Black, White and ten\nvalues for each hue. When determining contrast ratios, it’s useful to assess how\nmany color grades or “steps” are between the foreground and background\ncolors. Steps imply the distance between any two colors when arranged\nsequentially. For example, a color grade of 60 is five steps away from a color\ngrade of 10. The following table indicates the minimum number of steps\nrequired to achieve commonly 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 sufficient text contrast against the lowest-contrast gradient colors. For instance, if a gradient goes from Blue 50 to Teal 40, white text would be checked against the lighter color (Teal 40) while black text would be checked against the darker color (Blue 50). Such a contrast check should happen regardless of the text's current position relative to the area affected by the gradient space. This is because authors cannot predict where text may appear relative to the gradient background, due to some user preferences. WCAG requires a page to continue to meet accessibility requirements even if a user resizes text or alters text spacing within certain ranges. The text may well end up on top of the lowest-contrast gradient color, so the author must verify that the text contrast minimum is still met. The same is also true of 3:1 non-text contrast 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\ncan’t recognize 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 Design 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","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/color.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}