/** * 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": "#418B82", "main-color-2": "#5CA69C", "main-color-3": "#77C1B7", "main-color-4": "#92DDD2", "main-color-5": "#AEFAEF", "main-color-6": "#CBFFFF", "main-color-7": "#E8FFFF", "main-color-8": "#FFFFFF", "color-1": { "100": "#DCEFED", "200": "#BADFDA", "300": "#97CEC8", "400": "#74BEB5", "500": "#51AEA3", "600": "#418B82", "700": "#316862", "800": "#214641", "900": "#102321" }, "color-2": { "100": "#DEEDEB", "200": "#BDDBD7", "300": "#9CC9C3", "400": "#7BB7AF", "500": "#5CA69C", "600": "#48847C", "700": "#36635D", "800": "#24423E", "900": "#12211F" }, "color-3": { "100": "#DCEFEC", "200": "#B9DFDA", "300": "#96CFC7", "400": "#77C1B7", "500": "#50AFA2", "600": "#408C82", "700": "#306961", "800": "#204641", "900": "#102320" }, "color-4": { "100": "#D8F3EF", "200": "#B1E7DF", "300": "#92DDD2", "400": "#64CEBF", "500": "#3DC2AF", "600": "#319B8C", "700": "#247569", "800": "#184E46", "900": "#0C2723" }, "color-5": { "100": "#CFFCF6", "200": "#AEFAEF", "300": "#6FF6E3", "400": "#3FF3D9", "500": "#0FF0D0", "600": "#0CC0A6", "700": "#09907D", "800": "#066053", "900": "#03302A" }, "color-6": { "100": "#CBFFFF", "200": "#99FFFF", "300": "#66FFFF", "400": "#33FFFF", "500": "#00FFFF", "600": "#00CCCC", "700": "#009999", "800": "#006666", "900": "#003333" }, "color-7": { "100": "#CCFFFF", "200": "#99FFFF", "300": "#66FFFF", "400": "#33FFFF", "500": "#00FFFF", "600": "#00CCCC", "700": "#009999", "800": "#006666", "900": "#003333" }, "color-8": { "100": "#E6E6E6", "200": "#CCCCCC", "300": "#B3B3B3", "400": "#999999", "500": "#808080", "600": "#666666", "700": "#4D4D4D", "800": "#333333", "900": "#1A1A1A" } } } } }