/** * 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": "#802E19", "main-color-2": "#20540B", "main-color-3": "#005879", "main-color-4": "#5C387F", "color-1": { "100": "#F7DBD4", "200": "#EEB8AA", "300": "#E6947F", "400": "#DE7054", "500": "#D54D2A", "600": "#AB3D21", "700": "#802E19", "800": "#551F11", "900": "#2B0F08" }, "color-2": { "100": "#DDF9D2", "200": "#BBF3A5", "300": "#9AED78", "400": "#78E74B", "500": "#56E11E", "600": "#45B418", "700": "#348712", "800": "#20540B", "900": "#112D06" }, "color-3": { "100": "#CCF1FF", "200": "#99E3FF", "300": "#66D5FF", "400": "#33C7FF", "500": "#00B9FF", "600": "#0094CC", "700": "#006F99", "800": "#005879", "900": "#002533" }, "color-4": { "100": "#E6DCEF", "200": "#CCB8E0", "300": "#B395D0", "400": "#9A71C1", "500": "#804EB1", "600": "#5C387F", "700": "#4D2F6A", "800": "#331F47", "900": "#1A1023" } } } } }