/** * 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": "#CCE3FF", "main-color-2": "#ECDBF7", "main-color-3": "#F1DEC2", "main-color-4": "#D4E6CA", "color-1": { "100": "#CCE3FF", "200": "#99C7FF", "300": "#66ABFF", "400": "#338FFF", "500": "#0073FF", "600": "#005CCC", "700": "#004599", "800": "#002E66", "900": "#001733" }, "color-2": { "100": "#ECDBF7", "200": "#D3ACEC", "300": "#BD82E3", "400": "#A758DA", "500": "#912ED1", "600": "#7425A7", "700": "#571C7D", "800": "#3A1353", "900": "#1D092A" }, "color-3": { "100": "#F1DEC2", "200": "#ECD2AC", "300": "#E2BC83", "400": "#D9A559", "500": "#CF8F30", "600": "#A67226", "700": "#7C561D", "800": "#533913", "900": "#291D0A" }, "color-4": { "100": "#E3EFDC", "200": "#D4E6CA", "300": "#ABCE97", "400": "#8FBE74", "500": "#72AD52", "600": "#5C8B41", "700": "#456831", "800": "#2E4521", "900": "#172310" } } } } }