/** * To use these colors in Tailwind, you need to extend your tailwind.config.js file. * * For details see: * https://tailwindcss.com/docs/customizing-colors/#extending-the-default-palette * * To use own names for the colors, change the node names "main-color-*" and "color-*". */ { "theme": { "extend": { "colors": { "main-color-1": "#A0A0A0", "main-color-2": "#AFA0B0", "main-color-3": "#BDA0C0", "main-color-4": "#CCA0D0", "main-color-5": "#DBA0E0", "main-color-6": "#E9A0F1", "main-color-7": "#F8A0FF", "main-color-8": "#FFA0FF", "color-1": { "100": "#E6E6E6", "200": "#CCCCCC", "300": "#B3B3B3", "400": "#A0A0A0", "500": "#808080", "600": "#666666", "700": "#4D4D4D", "800": "#333333", "900": "#1A1A1A" }, "color-2": { "100": "#E8E3E8", "200": "#D0C7D1", "300": "#AFA0B0", "400": "#A190A2", "500": "#8A748B", "600": "#6E5D6F", "700": "#534554", "800": "#372E38", "900": "#1C171C" }, "color-3": { "100": "#EAE0EB", "200": "#D4C2D6", "300": "#BDA0C0", "400": "#AA84AE", "500": "#946699", "600": "#77517B", "700": "#593D5C", "800": "#3B293D", "900": "#1E141F" }, "color-4": { "100": "#EDDDEE", "200": "#DABBDD", "300": "#CCA0D0", "400": "#B677BB", "500": "#A354AB", "600": "#834488", "700": "#623366", "800": "#412244", "900": "#211122" }, "color-5": { "100": "#F0D9F2", "200": "#DBA0E0", "300": "#D38CD9", "400": "#C565CD", "500": "#B63FC0", "600": "#92329A", "700": "#6D2673", "800": "#49194D", "900": "#240D26" }, "color-6": { "100": "#F5D3F8", "200": "#E9A0F1", "300": "#E07AEB", "400": "#D64DE5", "500": "#CC21DE", "600": "#A31AB2", "700": "#7A1485", "800": "#510D59", "900": "#29072C" }, "color-7": { "100": "#FBCCFF", "200": "#F8A0FF", "300": "#F466FF", "400": "#F033FF", "500": "#EC00FF", "600": "#BD00CC", "700": "#8E0099", "800": "#5E0066", "900": "#2F0033" }, "color-8": { "100": "#FFCCFF", "200": "#FFA0FF", "300": "#FF66FF", "400": "#FF33FF", "500": "#FF00FF", "600": "#CC00CC", "700": "#990099", "800": "#660066", "900": "#330033" } } } } }