I was working on some new designs for my portfolio website last week and I ran into a limitation with the CSS framework I was using. I want to use Tailwind CSS on this site and it comes with a number of awesome default colors that utilize some awesome color theory including consistent hue changes and a wide range of values for flat designs. The framework has a default gray palette but it has a cool hue I wanted this site to have a warm hue so I made my own color palette that follows the same pattern for color values but for sepia (warm gray). It worked great and all I had to do to use it in my project was add it to the tailwind.config.js file as follows.
let colors = {
/* other default colors */
'sepia-darkest':'#2B2718',
'sepia-darker':'#474030',
'sepia-dark':'#695F4D',
'sepia':'#BFB4A3',
'sepia-light':'#F0EBE4',
'sepia-lighter':'#F7F5F2',
'sepia-lighest':'#FCFBFA',
/* more default colors */
}