A warm-gray color palette for TailwindCSS

Published: Jun 29, 2020


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


  /* more default colors */