Make a Basic color palette for your theme

CSSJSON

: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%);
}