/** * 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": "#008A75", "main-color-2": "#3B7EB9", "main-color-3": "#B2607F", "main-color-4": "#91773A", "color-1": { "100": "#CCFFF7", "200": "#99FFEF", "300": "#66FFE8", "400": "#33FFE0", "500": "#00FFD8", "600": "#00CCAD", "700": "#008A75", "800": "#006656", "900": "#00332B" }, "color-2": { "100": "#D8E6F3", "200": "#B2CEE6", "300": "#8BB5DA", "400": "#649CCE", "500": "#3B7EB9", "600": "#31699B", "700": "#254F74", "800": "#19354D", "900": "#0C1A27" }, "color-3": { "100": "#EEDDE3", "200": "#DEBAC8", "300": "#CD98AC", "400": "#BC7690", "500": "#B2607F", "600": "#89435D", "700": "#673246", "800": "#45212F", "900": "#221117" }, "color-4": { "100": "#F0EADB", "200": "#E2D5B6", "300": "#D3C092", "400": "#C5AB6D", "500": "#B69549", "600": "#91773A", "700": "#6D5A2C", "800": "#493C1D", "900": "#241E0F" } } } } }