@carbon/colors
Version:
Colors for digital and software products using the Carbon Design System
595 lines (594 loc) • 16.3 kB
JavaScript
//#region src/colors.ts
/**
* 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.
*/
const black = "#000000";
const black100 = black;
const blackHover = "#212121";
const white = "#ffffff";
const white0 = white;
const whiteHover = "#e8e8e8";
const yellow10 = "#fcf4d6";
const yellow20 = "#fddc69";
const yellow30 = "#f1c21b";
const yellow40 = "#d2a106";
const yellow50 = "#b28600";
const yellow60 = "#8e6a00";
const yellow70 = "#684e00";
const yellow80 = "#483700";
const yellow90 = "#302400";
const yellow100 = "#1c1500";
const yellow = {
10: yellow10,
20: yellow20,
30: yellow30,
40: yellow40,
50: yellow50,
60: yellow60,
70: yellow70,
80: yellow80,
90: yellow90,
100: yellow100
};
const yellow10Hover = "#f8e6a0";
const yellow20Hover = "#fccd27";
const yellow30Hover = "#ddb00e";
const yellow40Hover = "#bc9005";
const yellow50Hover = "#9e7700";
const yellow60Hover = "#755800";
const yellow70Hover = "#806000";
const yellow80Hover = "#5c4600";
const yellow90Hover = "#3d2e00";
const yellow100Hover = "#332600";
const yellowHover = {
10: yellow10Hover,
20: yellow20Hover,
30: yellow30Hover,
40: yellow40Hover,
50: yellow50Hover,
60: yellow60Hover,
70: yellow70Hover,
80: yellow80Hover,
90: yellow90Hover,
100: yellow100Hover
};
const orange10 = "#fff2e8";
const orange20 = "#ffd9be";
const orange30 = "#ffb784";
const orange40 = "#ff832b";
const orange50 = "#eb6200";
const orange60 = "#ba4e00";
const orange70 = "#8a3800";
const orange80 = "#5e2900";
const orange90 = "#3e1a00";
const orange100 = "#231000";
const orange = {
10: orange10,
20: orange20,
30: orange30,
40: orange40,
50: orange50,
60: orange60,
70: orange70,
80: orange80,
90: orange90,
100: orange100
};
const orange10Hover = "#ffe2cc";
const orange20Hover = "#ffc69e";
const orange30Hover = "#ff9d57";
const orange40Hover = "#fa6800";
const orange50Hover = "#cc5500";
const orange60Hover = "#9e4200";
const orange70Hover = "#a84400";
const orange80Hover = "#753300";
const orange90Hover = "#522200";
const orange100Hover = "#421e00";
const orangeHover = {
10: orange10Hover,
20: orange20Hover,
30: orange30Hover,
40: orange40Hover,
50: orange50Hover,
60: orange60Hover,
70: orange70Hover,
80: orange80Hover,
90: orange90Hover,
100: orange100Hover
};
const red10 = "#fff1f1";
const red20 = "#ffd7d9";
const red30 = "#ffb3b8";
const red40 = "#ff8389";
const red50 = "#fa4d56";
const red60 = "#da1e28";
const red70 = "#a2191f";
const red80 = "#750e13";
const red90 = "#520408";
const red100 = "#2d0709";
const red = {
10: red10,
20: red20,
30: red30,
40: red40,
50: red50,
60: red60,
70: red70,
80: red80,
90: red90,
100: red100
};
const red100Hover = "#540d11";
const red90Hover = "#66050a";
const red80Hover = "#921118";
const red70Hover = "#c21e25";
const red60Hover = "#b81922";
const red50Hover = "#ee0713";
const red40Hover = "#ff6168";
const red30Hover = "#ff99a0";
const red20Hover = "#ffc2c5";
const red10Hover = "#ffe0e0";
const redHover = {
100: red100Hover,
90: red90Hover,
80: red80Hover,
70: red70Hover,
60: red60Hover,
50: red50Hover,
40: red40Hover,
30: red30Hover,
20: red20Hover,
10: red10Hover
};
const magenta10 = "#fff0f7";
const magenta20 = "#ffd6e8";
const magenta30 = "#ffafd2";
const magenta40 = "#ff7eb6";
const magenta50 = "#ee5396";
const magenta60 = "#d02670";
const magenta70 = "#9f1853";
const magenta80 = "#740937";
const magenta90 = "#510224";
const magenta100 = "#2a0a18";
const magenta = {
10: magenta10,
20: magenta20,
30: magenta30,
40: magenta40,
50: magenta50,
60: magenta60,
70: magenta70,
80: magenta80,
90: magenta90,
100: magenta100
};
const magenta100Hover = "#53142f";
const magenta90Hover = "#68032e";
const magenta80Hover = "#8e0b43";
const magenta70Hover = "#bf1d63";
const magenta60Hover = "#b0215f";
const magenta50Hover = "#e3176f";
const magenta40Hover = "#ff57a0";
const magenta30Hover = "#ff94c3";
const magenta20Hover = "#ffbdda";
const magenta10Hover = "#ffe0ef";
const magentaHover = {
100: magenta100Hover,
90: magenta90Hover,
80: magenta80Hover,
70: magenta70Hover,
60: magenta60Hover,
50: magenta50Hover,
40: magenta40Hover,
30: magenta30Hover,
20: magenta20Hover,
10: magenta10Hover
};
const purple10 = "#f6f2ff";
const purple20 = "#e8daff";
const purple30 = "#d4bbff";
const purple40 = "#be95ff";
const purple50 = "#a56eff";
const purple60 = "#8a3ffc";
const purple70 = "#6929c4";
const purple80 = "#491d8b";
const purple90 = "#31135e";
const purple100 = "#1c0f30";
const purple = {
10: purple10,
20: purple20,
30: purple30,
40: purple40,
50: purple50,
60: purple60,
70: purple70,
80: purple80,
90: purple90,
100: purple100
};
const purple100Hover = "#341c59";
const purple90Hover = "#40197b";
const purple80Hover = "#5b24ad";
const purple70Hover = "#7c3dd6";
const purple60Hover = "#7822fb";
const purple50Hover = "#9352ff";
const purple40Hover = "#ae7aff";
const purple30Hover = "#c5a3ff";
const purple20Hover = "#dcc7ff";
const purple10Hover = "#ede5ff";
const purpleHover = {
100: purple100Hover,
90: purple90Hover,
80: purple80Hover,
70: purple70Hover,
60: purple60Hover,
50: purple50Hover,
40: purple40Hover,
30: purple30Hover,
20: purple20Hover,
10: purple10Hover
};
const blue10 = "#edf5ff";
const blue20 = "#d0e2ff";
const blue30 = "#a6c8ff";
const blue40 = "#78a9ff";
const blue50 = "#4589ff";
const blue60 = "#0f62fe";
const blue70 = "#0043ce";
const blue80 = "#002d9c";
const blue90 = "#001d6c";
const blue100 = "#001141";
const blue = {
10: blue10,
20: blue20,
30: blue30,
40: blue40,
50: blue50,
60: blue60,
70: blue70,
80: blue80,
90: blue90,
100: blue100
};
const blue100Hover = "#001f75";
const blue90Hover = "#00258a";
const blue80Hover = "#0039c7";
const blue70Hover = "#0053ff";
const blue60Hover = "#0050e6";
const blue50Hover = "#1f70ff";
const blue40Hover = "#5c97ff";
const blue30Hover = "#8ab6ff";
const blue20Hover = "#b8d3ff";
const blue10Hover = "#dbebff";
const blueHover = {
100: blue100Hover,
90: blue90Hover,
80: blue80Hover,
70: blue70Hover,
60: blue60Hover,
50: blue50Hover,
40: blue40Hover,
30: blue30Hover,
20: blue20Hover,
10: blue10Hover
};
const cyan10 = "#e5f6ff";
const cyan20 = "#bae6ff";
const cyan30 = "#82cfff";
const cyan40 = "#33b1ff";
const cyan50 = "#1192e8";
const cyan60 = "#0072c3";
const cyan70 = "#00539a";
const cyan80 = "#003a6d";
const cyan90 = "#012749";
const cyan100 = "#061727";
const cyan = {
10: cyan10,
20: cyan20,
30: cyan30,
40: cyan40,
50: cyan50,
60: cyan60,
70: cyan70,
80: cyan80,
90: cyan90,
100: cyan100
};
const cyan10Hover = "#cceeff";
const cyan20Hover = "#99daff";
const cyan30Hover = "#57beff";
const cyan40Hover = "#059fff";
const cyan50Hover = "#0f7ec8";
const cyan60Hover = "#005fa3";
const cyan70Hover = "#0066bd";
const cyan80Hover = "#00498a";
const cyan90Hover = "#013360";
const cyan100Hover = "#0b2947";
const cyanHover = {
10: cyan10Hover,
20: cyan20Hover,
30: cyan30Hover,
40: cyan40Hover,
50: cyan50Hover,
60: cyan60Hover,
70: cyan70Hover,
80: cyan80Hover,
90: cyan90Hover,
100: cyan100Hover
};
const teal10 = "#d9fbfb";
const teal20 = "#9ef0f0";
const teal30 = "#3ddbd9";
const teal40 = "#08bdba";
const teal50 = "#009d9a";
const teal60 = "#007d79";
const teal70 = "#005d5d";
const teal80 = "#004144";
const teal90 = "#022b30";
const teal100 = "#081a1c";
const teal = {
10: teal10,
20: teal20,
30: teal30,
40: teal40,
50: teal50,
60: teal60,
70: teal70,
80: teal80,
90: teal90,
100: teal100
};
const teal10Hover = "#acf6f6";
const teal20Hover = "#57e5e5";
const teal30Hover = "#25cac8";
const teal40Hover = "#07aba9";
const teal50Hover = "#008a87";
const teal60Hover = "#006b68";
const teal70Hover = "#007070";
const teal80Hover = "#005357";
const teal90Hover = "#033940";
const teal100Hover = "#0f3034";
const tealHover = {
10: teal10Hover,
20: teal20Hover,
30: teal30Hover,
40: teal40Hover,
50: teal50Hover,
60: teal60Hover,
70: teal70Hover,
80: teal80Hover,
90: teal90Hover,
100: teal100Hover
};
const green10 = "#defbe6";
const green20 = "#a7f0ba";
const green30 = "#6fdc8c";
const green40 = "#42be65";
const green50 = "#24a148";
const green60 = "#198038";
const green70 = "#0e6027";
const green80 = "#044317";
const green90 = "#022d0d";
const green100 = "#071908";
const green = {
10: green10,
20: green20,
30: green30,
40: green40,
50: green50,
60: green60,
70: green70,
80: green80,
90: green90,
100: green100
};
const green10Hover = "#b6f6c8";
const green20Hover = "#74e792";
const green30Hover = "#36ce5e";
const green40Hover = "#3bab5a";
const green50Hover = "#208e3f";
const green60Hover = "#166f31";
const green70Hover = "#11742f";
const green80Hover = "#05521c";
const green90Hover = "#033b11";
const green100Hover = "#0d300f";
const greenHover = {
10: green10Hover,
20: green20Hover,
30: green30Hover,
40: green40Hover,
50: green50Hover,
60: green60Hover,
70: green70Hover,
80: green80Hover,
90: green90Hover,
100: green100Hover
};
const coolGray10 = "#f2f4f8";
const coolGray20 = "#dde1e6";
const coolGray30 = "#c1c7cd";
const coolGray40 = "#a2a9b0";
const coolGray50 = "#878d96";
const coolGray60 = "#697077";
const coolGray70 = "#4d5358";
const coolGray80 = "#343a3f";
const coolGray90 = "#21272a";
const coolGray100 = "#121619";
const coolGray = {
10: coolGray10,
20: coolGray20,
30: coolGray30,
40: coolGray40,
50: coolGray50,
60: coolGray60,
70: coolGray70,
80: coolGray80,
90: coolGray90,
100: coolGray100
};
const coolGray10Hover = "#e4e9f1";
const coolGray20Hover = "#cdd3da";
const coolGray30Hover = "#adb5bd";
const coolGray40Hover = "#9199a1";
const coolGray50Hover = "#757b85";
const coolGray60Hover = "#585e64";
const coolGray70Hover = "#5d646a";
const coolGray80Hover = "#434a51";
const coolGray90Hover = "#2b3236";
const coolGray100Hover = "#222a2f";
const coolGrayHover = {
10: coolGray10Hover,
20: coolGray20Hover,
30: coolGray30Hover,
40: coolGray40Hover,
50: coolGray50Hover,
60: coolGray60Hover,
70: coolGray70Hover,
80: coolGray80Hover,
90: coolGray90Hover,
100: coolGray100Hover
};
const gray10 = "#f4f4f4";
const gray20 = "#e0e0e0";
const gray30 = "#c6c6c6";
const gray40 = "#a8a8a8";
const gray50 = "#8d8d8d";
const gray60 = "#6f6f6f";
const gray70 = "#525252";
const gray80 = "#393939";
const gray90 = "#262626";
const gray100 = "#161616";
const gray = {
10: gray10,
20: gray20,
30: gray30,
40: gray40,
50: gray50,
60: gray60,
70: gray70,
80: gray80,
90: gray90,
100: gray100
};
const gray10Hover = "#e8e8e8";
const gray20Hover = "#d1d1d1";
const gray30Hover = "#b5b5b5";
const gray40Hover = "#999999";
const gray50Hover = "#7a7a7a";
const gray60Hover = "#5e5e5e";
const gray70Hover = "#636363";
const gray80Hover = "#474747";
const gray90Hover = "#333333";
const gray100Hover = "#292929";
const grayHover = {
10: gray10Hover,
20: gray20Hover,
30: gray30Hover,
40: gray40Hover,
50: gray50Hover,
60: gray60Hover,
70: gray70Hover,
80: gray80Hover,
90: gray90Hover,
100: gray100Hover
};
const warmGray10 = "#f7f3f2";
const warmGray20 = "#e5e0df";
const warmGray30 = "#cac5c4";
const warmGray40 = "#ada8a8";
const warmGray50 = "#8f8b8b";
const warmGray60 = "#726e6e";
const warmGray70 = "#565151";
const warmGray80 = "#3c3838";
const warmGray90 = "#272525";
const warmGray100 = "#171414";
const warmGray = {
10: warmGray10,
20: warmGray20,
30: warmGray30,
40: warmGray40,
50: warmGray50,
60: warmGray60,
70: warmGray70,
80: warmGray80,
90: warmGray90,
100: warmGray100
};
const warmGray10Hover = "#f0e8e6";
const warmGray20Hover = "#d8d0cf";
const warmGray30Hover = "#b9b3b1";
const warmGray40Hover = "#9c9696";
const warmGray50Hover = "#7f7b7b";
const warmGray60Hover = "#605d5d";
const warmGray70Hover = "#696363";
const warmGray80Hover = "#4c4848";
const warmGray90Hover = "#343232";
const warmGray100Hover = "#2c2626";
const warmGrayHover = {
10: warmGray10Hover,
20: warmGray20Hover,
30: warmGray30Hover,
40: warmGray40Hover,
50: warmGray50Hover,
60: warmGray60Hover,
70: warmGray70Hover,
80: warmGray80Hover,
90: warmGray90Hover,
100: warmGray100Hover
};
const colors = {
black: { 100: black },
blue,
coolGray,
cyan,
gray,
green,
magenta,
orange,
purple,
red,
teal,
warmGray,
white: { 0: white },
yellow
};
const hoverColors = {
whiteHover,
blackHover,
blueHover,
coolGrayHover,
cyanHover,
grayHover,
greenHover,
magentaHover,
orangeHover,
purpleHover,
redHover,
tealHover,
warmGrayHover,
yellowHover
};
//#endregion
//#region src/rgb.ts
/**
* 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.
*/
/**
* Parses a hex code string into an RGBA color string with the given opacity.
*/
const rgba = (hexCode, opacity) => {
const values = [
hexCode.substring(1, 3),
hexCode.substring(3, 5),
hexCode.substring(5, 7)
].map((string) => parseInt(string, 16));
return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
};
//#endregion
export { black, black100, blackHover, blue, blue10, blue100, blue100Hover, blue10Hover, blue20, blue20Hover, blue30, blue30Hover, blue40, blue40Hover, blue50, blue50Hover, blue60, blue60Hover, blue70, blue70Hover, blue80, blue80Hover, blue90, blue90Hover, blueHover, colors, coolGray, coolGray10, coolGray100, coolGray100Hover, coolGray10Hover, coolGray20, coolGray20Hover, coolGray30, coolGray30Hover, coolGray40, coolGray40Hover, coolGray50, coolGray50Hover, coolGray60, coolGray60Hover, coolGray70, coolGray70Hover, coolGray80, coolGray80Hover, coolGray90, coolGray90Hover, coolGrayHover, cyan, cyan10, cyan100, cyan100Hover, cyan10Hover, cyan20, cyan20Hover, cyan30, cyan30Hover, cyan40, cyan40Hover, cyan50, cyan50Hover, cyan60, cyan60Hover, cyan70, cyan70Hover, cyan80, cyan80Hover, cyan90, cyan90Hover, cyanHover, gray, gray10, gray100, gray100Hover, gray10Hover, gray20, gray20Hover, gray30, gray30Hover, gray40, gray40Hover, gray50, gray50Hover, gray60, gray60Hover, gray70, gray70Hover, gray80, gray80Hover, gray90, gray90Hover, grayHover, green, green10, green100, green100Hover, green10Hover, green20, green20Hover, green30, green30Hover, green40, green40Hover, green50, green50Hover, green60, green60Hover, green70, green70Hover, green80, green80Hover, green90, green90Hover, greenHover, hoverColors, magenta, magenta10, magenta100, magenta100Hover, magenta10Hover, magenta20, magenta20Hover, magenta30, magenta30Hover, magenta40, magenta40Hover, magenta50, magenta50Hover, magenta60, magenta60Hover, magenta70, magenta70Hover, magenta80, magenta80Hover, magenta90, magenta90Hover, magentaHover, orange, orange10, orange100, orange100Hover, orange10Hover, orange20, orange20Hover, orange30, orange30Hover, orange40, orange40Hover, orange50, orange50Hover, orange60, orange60Hover, orange70, orange70Hover, orange80, orange80Hover, orange90, orange90Hover, orangeHover, purple, purple10, purple100, purple100Hover, purple10Hover, purple20, purple20Hover, purple30, purple30Hover, purple40, purple40Hover, purple50, purple50Hover, purple60, purple60Hover, purple70, purple70Hover, purple80, purple80Hover, purple90, purple90Hover, purpleHover, red, red10, red100, red100Hover, red10Hover, red20, red20Hover, red30, red30Hover, red40, red40Hover, red50, red50Hover, red60, red60Hover, red70, red70Hover, red80, red80Hover, red90, red90Hover, redHover, rgba, teal, teal10, teal100, teal100Hover, teal10Hover, teal20, teal20Hover, teal30, teal30Hover, teal40, teal40Hover, teal50, teal50Hover, teal60, teal60Hover, teal70, teal70Hover, teal80, teal80Hover, teal90, teal90Hover, tealHover, warmGray, warmGray10, warmGray100, warmGray100Hover, warmGray10Hover, warmGray20, warmGray20Hover, warmGray30, warmGray30Hover, warmGray40, warmGray40Hover, warmGray50, warmGray50Hover, warmGray60, warmGray60Hover, warmGray70, warmGray70Hover, warmGray80, warmGray80Hover, warmGray90, warmGray90Hover, warmGrayHover, white, white0, whiteHover, yellow, yellow10, yellow100, yellow100Hover, yellow10Hover, yellow20, yellow20Hover, yellow30, yellow30Hover, yellow40, yellow40Hover, yellow50, yellow50Hover, yellow60, yellow60Hover, yellow70, yellow70Hover, yellow80, yellow80Hover, yellow90, yellow90Hover, yellowHover };