Color System

Website | CodeSandbox

yarn add use-color-system

import { useColorSystem } from 'use-color-system'

const colors = useColorSystem({
  hueOffset: 28, // pretty random number 0-30
  invertedLightness: false, // enable for automatic Dark Mode
  highContrastMode: false // enable for accessibility
});
styledSystemTheme.colors = colors;

<Box bg="gray.9" color="gray.0">
  Hello
  <Text color="red.5">World</Text>
</Box>

Depending on colors may defer: usually it's gray magenta red orange lime green teal cyan blue purple