@carbon/colors/js/generated/colors.js

Colors for digital and software products using the Carbon Design System

// Code generated by @carbon/colors. DO NOT EDIT.
//
// Copyright IBM Corp. 2018, 2026
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.

export const black = '#000000';
export const black100 = black;
export const blackHover = '#212121';

export const white = '#ffffff';
export const white0 = white;
export const whiteHover = '#e8e8e8';

export const yellow10 = '#fcf4d6';
export const yellow20 = '#fddc69';
export const yellow30 = '#f1c21b';
export const yellow40 = '#d2a106';
export const yellow50 = '#b28600';
export const yellow60 = '#8e6a00';
export const yellow70 = '#684e00';
export const yellow80 = '#483700';
export const yellow90 = '#302400';
export const yellow100 = '#1c1500';
export const yellow = {
  10: yellow10,
  20: yellow20,
  30: yellow30,
  40: yellow40,
  50: yellow50,
  60: yellow60,
  70: yellow70,
  80: yellow80,
  90: yellow90,
  100: yellow100,
};

export const yellow10Hover = '#f8e6a0';
export const yellow20Hover = '#fccd27';
export const yellow30Hover = '#ddb00e';
export const yellow40Hover = '#bc9005';
export const yellow50Hover = '#9e7700';
export const yellow60Hover = '#755800';
export const yellow70Hover = '#806000';
export const yellow80Hover = '#5c4600';
export const yellow90Hover = '#3d2e00';
export const yellow100Hover = '#332600';
export const yellowHover = {
  10: yellow10Hover,
  20: yellow20Hover,
  30: yellow30Hover,
  40: yellow40Hover,
  50: yellow50Hover,
  60: yellow60Hover,
  70: yellow70Hover,
  80: yellow80Hover,
  90: yellow90Hover,
  100: yellow100Hover,
};

export const orange10 = '#fff2e8';
export const orange20 = '#ffd9be';
export const orange30 = '#ffb784';
export const orange40 = '#ff832b';
export const orange50 = '#eb6200';
export const orange60 = '#ba4e00';
export const orange70 = '#8a3800';
export const orange80 = '#5e2900';
export const orange90 = '#3e1a00';
export const orange100 = '#231000';
export const orange = {
  10: orange10,
  20: orange20,
  30: orange30,
  40: orange40,
  50: orange50,
  60: orange60,
  70: orange70,
  80: orange80,
  90: orange90,
  100: orange100,
};

export const orange10Hover = '#ffe2cc';
export const orange20Hover = '#ffc69e';
export const orange30Hover = '#ff9d57';
export const orange40Hover = '#fa6800';
export const orange50Hover = '#cc5500';
export const orange60Hover = '#9e4200';
export const orange70Hover = '#a84400';
export const orange80Hover = '#753300';
export const orange90Hover = '#522200';
export const orange100Hover = '#421e00';
export const orangeHover = {
  10: orange10Hover,
  20: orange20Hover,
  30: orange30Hover,
  40: orange40Hover,
  50: orange50Hover,
  60: orange60Hover,
  70: orange70Hover,
  80: orange80Hover,
  90: orange90Hover,
  100: orange100Hover,
};

export const red10 = '#fff1f1';
export const red20 = '#ffd7d9';
export const red30 = '#ffb3b8';
export const red40 = '#ff8389';
export const red50 = '#fa4d56';
export const red60 = '#da1e28';
export const red70 = '#a2191f';
export const red80 = '#750e13';
export const red90 = '#520408';
export const red100 = '#2d0709';
export const red = {
  10: red10,
  20: red20,
  30: red30,
  40: red40,
  50: red50,
  60: red60,
  70: red70,
  80: red80,
  90: red90,
  100: red100,
};

export const red10Hover = '#ffe0e0';
export const red20Hover = '#ffc2c5';
export const red30Hover = '#ff99a0';
export const red40Hover = '#ff6168';
export const red50Hover = '#ee0713';
export const red60Hover = '#b81922';
export const red70Hover = '#c21e25';
export const red80Hover = '#921118';
export const red90Hover = '#66050a';
export const red100Hover = '#540d11';
export const redHover = {
  10: red10Hover,
  20: red20Hover,
  30: red30Hover,
  40: red40Hover,
  50: red50Hover,
  60: red60Hover,
  70: red70Hover,
  80: red80Hover,
  90: red90Hover,
  100: red100Hover,
};

export const magenta10 = '#fff0f7';
export const magenta20 = '#ffd6e8';
export const magenta30 = '#ffafd2';
export const magenta40 = '#ff7eb6';
export const magenta50 = '#ee5396';
export const magenta60 = '#d02670';
export const magenta70 = '#9f1853';
export const magenta80 = '#740937';
export const magenta90 = '#510224';
export const magenta100 = '#2a0a18';
export const magenta = {
  10: magenta10,
  20: magenta20,
  30: magenta30,
  40: magenta40,
  50: magenta50,
  60: magenta60,
  70: magenta70,
  80: magenta80,
  90: magenta90,
  100: magenta100,
};

export const magenta10Hover = '#ffe0ef';
export const magenta20Hover = '#ffbdda';
export const magenta30Hover = '#ff94c3';
export const magenta40Hover = '#ff57a0';
export const magenta50Hover = '#e3176f';
export const magenta60Hover = '#b0215f';
export const magenta70Hover = '#bf1d63';
export const magenta80Hover = '#8e0b43';
export const magenta90Hover = '#68032e';
export const magenta100Hover = '#53142f';
export const magentaHover = {
  10: magenta10Hover,
  20: magenta20Hover,
  30: magenta30Hover,
  40: magenta40Hover,
  50: magenta50Hover,
  60: magenta60Hover,
  70: magenta70Hover,
  80: magenta80Hover,
  90: magenta90Hover,
  100: magenta100Hover,
};

export const purple10 = '#f6f2ff';
export const purple20 = '#e8daff';
export const purple30 = '#d4bbff';
export const purple40 = '#be95ff';
export const purple50 = '#a56eff';
export const purple60 = '#8a3ffc';
export const purple70 = '#6929c4';
export const purple80 = '#491d8b';
export const purple90 = '#31135e';
export const purple100 = '#1c0f30';
export const purple = {
  10: purple10,
  20: purple20,
  30: purple30,
  40: purple40,
  50: purple50,
  60: purple60,
  70: purple70,
  80: purple80,
  90: purple90,
  100: purple100,
};

export const purple10Hover = '#ede5ff';
export const purple20Hover = '#dcc7ff';
export const purple30Hover = '#c5a3ff';
export const purple40Hover = '#ae7aff';
export const purple50Hover = '#9352ff';
export const purple60Hover = '#7822fb';
export const purple70Hover = '#7c3dd6';
export const purple80Hover = '#5b24ad';
export const purple90Hover = '#40197b';
export const purple100Hover = '#341c59';
export const purpleHover = {
  10: purple10Hover,
  20: purple20Hover,
  30: purple30Hover,
  40: purple40Hover,
  50: purple50Hover,
  60: purple60Hover,
  70: purple70Hover,
  80: purple80Hover,
  90: purple90Hover,
  100: purple100Hover,
};

export const blue10 = '#edf5ff';
export const blue20 = '#d0e2ff';
export const blue30 = '#a6c8ff';
export const blue40 = '#78a9ff';
export const blue50 = '#4589ff';
export const blue60 = '#0f62fe';
export const blue70 = '#0043ce';
export const blue80 = '#002d9c';
export const blue90 = '#001d6c';
export const blue100 = '#001141';
export const blue = {
  10: blue10,
  20: blue20,
  30: blue30,
  40: blue40,
  50: blue50,
  60: blue60,
  70: blue70,
  80: blue80,
  90: blue90,
  100: blue100,
};

export const blue10Hover = '#dbebff';
export const blue20Hover = '#b8d3ff';
export const blue30Hover = '#8ab6ff';
export const blue40Hover = '#5c97ff';
export const blue50Hover = '#1f70ff';
export const blue60Hover = '#0050e6';
export const blue70Hover = '#0053ff';
export const blue80Hover = '#0039c7';
export const blue90Hover = '#00258a';
export const blue100Hover = '#001f75';
export const blueHover = {
  10: blue10Hover,
  20: blue20Hover,
  30: blue30Hover,
  40: blue40Hover,
  50: blue50Hover,
  60: blue60Hover,
  70: blue70Hover,
  80: blue80Hover,
  90: blue90Hover,
  100: blue100Hover,
};

export const cyan10 = '#e5f6ff';
export const cyan20 = '#bae6ff';
export const cyan30 = '#82cfff';
export const cyan40 = '#33b1ff';
export const cyan50 = '#1192e8';
export const cyan60 = '#0072c3';
export const cyan70 = '#00539a';
export const cyan80 = '#003a6d';
export const cyan90 = '#012749';
export const cyan100 = '#061727';
export const cyan = {
  10: cyan10,
  20: cyan20,
  30: cyan30,
  40: cyan40,
  50: cyan50,
  60: cyan60,
  70: cyan70,
  80: cyan80,
  90: cyan90,
  100: cyan100,
};

export const cyan10Hover = '#cceeff';
export const cyan20Hover = '#99daff';
export const cyan30Hover = '#57beff';
export const cyan40Hover = '#059fff';
export const cyan50Hover = '#0f7ec8';
export const cyan60Hover = '#005fa3';
export const cyan70Hover = '#0066bd';
export const cyan80Hover = '#00498a';
export const cyan90Hover = '#013360';
export const cyan100Hover = '#0b2947';
export const cyanHover = {
  10: cyan10Hover,
  20: cyan20Hover,
  30: cyan30Hover,
  40: cyan40Hover,
  50: cyan50Hover,
  60: cyan60Hover,
  70: cyan70Hover,
  80: cyan80Hover,
  90: cyan90Hover,
  100: cyan100Hover,
};

export const teal10 = '#d9fbfb';
export const teal20 = '#9ef0f0';
export const teal30 = '#3ddbd9';
export const teal40 = '#08bdba';
export const teal50 = '#009d9a';
export const teal60 = '#007d79';
export const teal70 = '#005d5d';
export const teal80 = '#004144';
export const teal90 = '#022b30';
export const teal100 = '#081a1c';
export const teal = {
  10: teal10,
  20: teal20,
  30: teal30,
  40: teal40,
  50: teal50,
  60: teal60,
  70: teal70,
  80: teal80,
  90: teal90,
  100: teal100,
};

export const teal10Hover = '#acf6f6';
export const teal20Hover = '#57e5e5';
export const teal30Hover = '#25cac8';
export const teal40Hover = '#07aba9';
export const teal50Hover = '#008a87';
export const teal60Hover = '#006b68';
export const teal70Hover = '#007070';
export const teal80Hover = '#005357';
export const teal90Hover = '#033940';
export const teal100Hover = '#0f3034';
export const tealHover = {
  10: teal10Hover,
  20: teal20Hover,
  30: teal30Hover,
  40: teal40Hover,
  50: teal50Hover,
  60: teal60Hover,
  70: teal70Hover,
  80: teal80Hover,
  90: teal90Hover,
  100: teal100Hover,
};

export const green10 = '#defbe6';
export const green20 = '#a7f0ba';
export const green30 = '#6fdc8c';
export const green40 = '#42be65';
export const green50 = '#24a148';
export const green60 = '#198038';
export const green70 = '#0e6027';
export const green80 = '#044317';
export const green90 = '#022d0d';
export const green100 = '#071908';
export const green = {
  10: green10,
  20: green20,
  30: green30,
  40: green40,
  50: green50,
  60: green60,
  70: green70,
  80: green80,
  90: green90,
  100: green100,
};

export const green10Hover = '#b6f6c8';
export const green20Hover = '#74e792';
export const green30Hover = '#36ce5e';
export const green40Hover = '#3bab5a';
export const green50Hover = '#208e3f';
export const green60Hover = '#166f31';
export const green70Hover = '#11742f';
export const green80Hover = '#05521c';
export const green90Hover = '#033b11';
export const green100Hover = '#0d300f';
export const greenHover = {
  10: green10Hover,
  20: green20Hover,
  30: green30Hover,
  40: green40Hover,
  50: green50Hover,
  60: green60Hover,
  70: green70Hover,
  80: green80Hover,
  90: green90Hover,
  100: green100Hover,
};

export const coolGray10 = '#f2f4f8';
export const coolGray20 = '#dde1e6';
export const coolGray30 = '#c1c7cd';
export const coolGray40 = '#a2a9b0';
export const coolGray50 = '#878d96';
export const coolGray60 = '#697077';
export const coolGray70 = '#4d5358';
export const coolGray80 = '#343a3f';
export const coolGray90 = '#21272a';
export const coolGray100 = '#121619';
export const coolGray = {
  10: coolGray10,
  20: coolGray20,
  30: coolGray30,
  40: coolGray40,
  50: coolGray50,
  60: coolGray60,
  70: coolGray70,
  80: coolGray80,
  90: coolGray90,
  100: coolGray100,
};

export const coolGray10Hover = '#e4e9f1';
export const coolGray20Hover = '#cdd3da';
export const coolGray30Hover = '#adb5bd';
export const coolGray40Hover = '#9199a1';
export const coolGray50Hover = '#757b85';
export const coolGray60Hover = '#585e64';
export const coolGray70Hover = '#5d646a';
export const coolGray80Hover = '#434a51';
export const coolGray90Hover = '#2b3236';
export const coolGray100Hover = '#222a2f';
export const coolGrayHover = {
  10: coolGray10Hover,
  20: coolGray20Hover,
  30: coolGray30Hover,
  40: coolGray40Hover,
  50: coolGray50Hover,
  60: coolGray60Hover,
  70: coolGray70Hover,
  80: coolGray80Hover,
  90: coolGray90Hover,
  100: coolGray100Hover,
};

export const gray10 = '#f4f4f4';
export const gray20 = '#e0e0e0';
export const gray30 = '#c6c6c6';
export const gray40 = '#a8a8a8';
export const gray50 = '#8d8d8d';
export const gray60 = '#6f6f6f';
export const gray70 = '#525252';
export const gray80 = '#393939';
export const gray90 = '#262626';
export const gray100 = '#161616';
export const gray = {
  10: gray10,
  20: gray20,
  30: gray30,
  40: gray40,
  50: gray50,
  60: gray60,
  70: gray70,
  80: gray80,
  90: gray90,
  100: gray100,
};

export const gray10Hover = '#e8e8e8';
export const gray20Hover = '#d1d1d1';
export const gray30Hover = '#b5b5b5';
export const gray40Hover = '#999999';
export const gray50Hover = '#7a7a7a';
export const gray60Hover = '#5e5e5e';
export const gray70Hover = '#636363';
export const gray80Hover = '#474747';
export const gray90Hover = '#333333';
export const gray100Hover = '#292929';
export const grayHover = {
  10: gray10Hover,
  20: gray20Hover,
  30: gray30Hover,
  40: gray40Hover,
  50: gray50Hover,
  60: gray60Hover,
  70: gray70Hover,
  80: gray80Hover,
  90: gray90Hover,
  100: gray100Hover,
};

export const warmGray10 = '#f7f3f2';
export const warmGray20 = '#e5e0df';
export const warmGray30 = '#cac5c4';
export const warmGray40 = '#ada8a8';
export const warmGray50 = '#8f8b8b';
export const warmGray60 = '#726e6e';
export const warmGray70 = '#565151';
export const warmGray80 = '#3c3838';
export const warmGray90 = '#272525';
export const warmGray100 = '#171414';
export const warmGray = {
  10: warmGray10,
  20: warmGray20,
  30: warmGray30,
  40: warmGray40,
  50: warmGray50,
  60: warmGray60,
  70: warmGray70,
  80: warmGray80,
  90: warmGray90,
  100: warmGray100,
};

export const warmGray10Hover = '#f0e8e6';
export const warmGray20Hover = '#d8d0cf';
export const warmGray30Hover = '#b9b3b1';
export const warmGray40Hover = '#9c9696';
export const warmGray50Hover = '#7f7b7b';
export const warmGray60Hover = '#605d5d';
export const warmGray70Hover = '#696363';
export const warmGray80Hover = '#4c4848';
export const warmGray90Hover = '#343232';
export const warmGray100Hover = '#2c2626';
export const warmGrayHover = {
  10: warmGray10Hover,
  20: warmGray20Hover,
  30: warmGray30Hover,
  40: warmGray40Hover,
  50: warmGray50Hover,
  60: warmGray60Hover,
  70: warmGray70Hover,
  80: warmGray80Hover,
  90: warmGray90Hover,
  100: warmGray100Hover,
};

export const colors = {
  black: { 100: black },
  yellow: {
    10: yellow10,
    20: yellow20,
    30: yellow30,
    40: yellow40,
    50: yellow50,
    60: yellow60,
    70: yellow70,
    80: yellow80,
    90: yellow90,
    100: yellow100,
  },
  orange: {
    10: orange10,
    20: orange20,
    30: orange30,
    40: orange40,
    50: orange50,
    60: orange60,
    70: orange70,
    80: orange80,
    90: orange90,
    100: orange100,
  },
  red: {
    10: red10,
    20: red20,
    30: red30,
    40: red40,
    50: red50,
    60: red60,
    70: red70,
    80: red80,
    90: red90,
    100: red100,
  },
  magenta: {
    10: magenta10,
    20: magenta20,
    30: magenta30,
    40: magenta40,
    50: magenta50,
    60: magenta60,
    70: magenta70,
    80: magenta80,
    90: magenta90,
    100: magenta100,
  },
  purple: {
    10: purple10,
    20: purple20,
    30: purple30,
    40: purple40,
    50: purple50,
    60: purple60,
    70: purple70,
    80: purple80,
    90: purple90,
    100: purple100,
  },
  blue: {
    10: blue10,
    20: blue20,
    30: blue30,
    40: blue40,
    50: blue50,
    60: blue60,
    70: blue70,
    80: blue80,
    90: blue90,
    100: blue100,
  },
  cyan: {
    10: cyan10,
    20: cyan20,
    30: cyan30,
    40: cyan40,
    50: cyan50,
    60: cyan60,
    70: cyan70,
    80: cyan80,
    90: cyan90,
    100: cyan100,
  },
  teal: {
    10: teal10,
    20: teal20,
    30: teal30,
    40: teal40,
    50: teal50,
    60: teal60,
    70: teal70,
    80: teal80,
    90: teal90,
    100: teal100,
  },
  green: {
    10: green10,
    20: green20,
    30: green30,
    40: green40,
    50: green50,
    60: green60,
    70: green70,
    80: green80,
    90: green90,
    100: green100,
  },
  coolGray: {
    10: coolGray10,
    20: coolGray20,
    30: coolGray30,
    40: coolGray40,
    50: coolGray50,
    60: coolGray60,
    70: coolGray70,
    80: coolGray80,
    90: coolGray90,
    100: coolGray100,
  },
  gray: {
    10: gray10,
    20: gray20,
    30: gray30,
    40: gray40,
    50: gray50,
    60: gray60,
    70: gray70,
    80: gray80,
    90: gray90,
    100: gray100,
  },
  warmGray: {
    10: warmGray10,
    20: warmGray20,
    30: warmGray30,
    40: warmGray40,
    50: warmGray50,
    60: warmGray60,
    70: warmGray70,
    80: warmGray80,
    90: warmGray90,
    100: warmGray100,
  },
  white: { 0: white },
};

export const hoverColors = {
  blackHover,
  yellowHover,
  orangeHover,
  redHover,
  magentaHover,
  purpleHover,
  blueHover,
  cyanHover,
  tealHover,
  greenHover,
  coolGrayHover,
  grayHover,
  warmGrayHover,
  whiteHover,
};