Make a Basic 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:

  1. You adjust the base color per row
  2. Change lightness per column
  3. Set color intensity across all colors using the saturation slider
  4. Export your colors in CSS, JSON

This app is built using React. Source code is available on GitHub. All sliders used on this page are published on npm as react-color-sliders, see documentation.

In addition to Basic, I also made similar color tools for Bootstrap and Tailwind and Material UI.