Make aBasic color palette for your theme
:root { --blue_900: hsl(211, 100%, 10%); --blue_800: hsl(211, 100%, 20%); --blue_700: hsl(211, 100%, 30%); --blue_600: hsl(211, 100%, 40%); --blue_500: hsl(211, 100%, 50%); --blue_400: hsl(211, 100%, 60%); --blue_300: hsl(211, 100%, 70%); --blue_200: hsl(211, 100%, 80%); --blue_100: hsl(211, 100%, 90%); --indigo_900: hsl(253, 100%, 10%); --indigo_800: hsl(253, 100%, 20%); --indigo_700: hsl(253, 100%, 30%); --indigo_600: hsl(253, 100%, 40%); --indigo_500: hsl(253, 100%, 50%); --indigo_400: hsl(253, 100%, 60%); --indigo_300: hsl(253, 100%, 70%); --indigo_200: hsl(253, 100%, 80%); --indigo_100: hsl(253, 100%, 90%); --purple_900: hsl(271, 100%, 10%); --purple_800: hsl(271, 100%, 20%); --purple_700: hsl(271, 100%, 30%); --purple_600: hsl(271, 100%, 40%); --purple_500: hsl(271, 100%, 50%); --purple_400: hsl(271, 100%, 60%); --purple_300: hsl(271, 100%, 70%); --purple_200: hsl(271, 100%, 80%); --purple_100: hsl(271, 100%, 90%); --pink_900: hsl(332, 100%, 10%); --pink_800: hsl(332, 100%, 20%); --pink_700: hsl(332, 100%, 30%); --pink_600: hsl(332, 100%, 40%); --pink_500: hsl(332, 100%, 50%); --pink_400: hsl(332, 100%, 60%); --pink_300: hsl(332, 100%, 70%); --pink_200: hsl(332, 100%, 80%); --pink_100: hsl(332, 100%, 90%); --red_900: hsl(354, 100%, 10%); --red_800: hsl(354, 100%, 20%); --red_700: hsl(354, 100%, 30%); --red_600: hsl(354, 100%, 40%); --red_500: hsl(354, 100%, 50%); --red_400: hsl(354, 100%, 60%); --red_300: hsl(354, 100%, 70%); --red_200: hsl(354, 100%, 80%); --red_100: hsl(354, 100%, 90%); --orange_900: hsl(27, 100%, 10%); --orange_800: hsl(27, 100%, 20%); --orange_700: hsl(27, 100%, 30%); --orange_600: hsl(27, 100%, 40%); --orange_500: hsl(27, 100%, 50%); --orange_400: hsl(27, 100%, 60%); --orange_300: hsl(27, 100%, 70%); --orange_200: hsl(27, 100%, 80%); --orange_100: hsl(27, 100%, 90%); --yellow_900: hsl(45, 100%, 10%); --yellow_800: hsl(45, 100%, 20%); --yellow_700: hsl(45, 100%, 30%); --yellow_600: hsl(45, 100%, 40%); --yellow_500: hsl(45, 100%, 50%); --yellow_400: hsl(45, 100%, 60%); --yellow_300: hsl(45, 100%, 70%); --yellow_200: hsl(45, 100%, 80%); --yellow_100: hsl(45, 100%, 90%); --green_900: hsl(134, 100%, 10%); --green_800: hsl(134, 100%, 20%); --green_700: hsl(134, 100%, 30%); --green_600: hsl(134, 100%, 40%); --green_500: hsl(134, 100%, 50%); --green_400: hsl(134, 100%, 60%); --green_300: hsl(134, 100%, 70%); --green_200: hsl(134, 100%, 80%); --green_100: hsl(134, 100%, 90%); --teal_900: hsl(162, 100%, 10%); --teal_800: hsl(162, 100%, 20%); --teal_700: hsl(162, 100%, 30%); --teal_600: hsl(162, 100%, 40%); --teal_500: hsl(162, 100%, 50%); --teal_400: hsl(162, 100%, 60%); --teal_300: hsl(162, 100%, 70%); --teal_200: hsl(162, 100%, 80%); --teal_100: hsl(162, 100%, 90%); --cyan_900: hsl(188, 100%, 10%); --cyan_800: hsl(188, 100%, 20%); --cyan_700: hsl(188, 100%, 30%); --cyan_600: hsl(188, 100%, 40%); --cyan_500: hsl(188, 100%, 50%); --cyan_400: hsl(188, 100%, 60%); --cyan_300: hsl(188, 100%, 70%); --cyan_200: hsl(188, 100%, 80%); --cyan_100: hsl(188, 100%, 90%);}How this works:
- You adjust the base color per row
- Change lightness per column
- Set color intensity across all colors using the saturation slider
- Export your colors in CSS, JSON
This app is built using React. Source code is available onGitHub. All sliders used on this page are published on npm asreact-color-sliders,see documentation.
In addition to Basic, I also made similar color tools forBootstrap andTailwind andMaterial UI.
