/** * 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": "#EBC4C4", "main-color-2": "#CECFB3", "main-color-3": "#AAD5D6", "main-color-4": "#CACBE7", "color-1": { "100": "#F2D9D9", "200": "#EBC4C4", "300": "#D88D8D", "400": "#CB6767", "500": "#BE4141", "600": "#983434", "700": "#722727", "800": "#4C1A1A", "900": "#260D0D" }, "color-2": { "100": "#EBEBE0", "200": "#CECFB3", "300": "#C3C4A1", "400": "#AEB082", "500": "#9A9C63", "600": "#7B7D4F", "700": "#5D5E3B", "800": "#3E3F27", "900": "#1F1F14" }, "color-3": { "100": "#DDEEEE", "200": "#AAD5D6", "300": "#98CCCD", "400": "#75BBBD", "500": "#53AAAC", "600": "#42888A", "700": "#326667", "800": "#214445", "900": "#112222" }, "color-4": { "100": "#DCDDEF", "200": "#CACBE7", "300": "#9698CF", "400": "#7375BF", "500": "#4F53B0", "600": "#40428C", "700": "#303269", "800": "#202146", "900": "#101123" } } } } }