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 */

}