Skip to content

Instantly share code, notes, and snippets.

@indaco
Last active July 2, 2023 17:05
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save indaco/ea5d9d514e67d1e65daf4d95012bc9ff to your computer and use it in GitHub Desktop.
Save indaco/ea5d9d514e67d1e65daf4d95012bc9ff to your computer and use it in GitHub Desktop.
A named colors approach for color palettes from https://colorsandfonts.com

[Named] Colors and Palettes

A named colors approach for color palettes from Color And Fonts by Michael Andreuzza to be used with TailwindCSS

Warm Palettes

Palette 001 (Warm #1)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'jaguar': '#01020a',
        'sunset': '#801805',
        'scarlet': '#ff2e00',
        'sunshade': '#fea82f',
        'cream': '#fffecb',
      }
    }
  }
}

Palette 002 (Warm #2)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'chestnut': '#540B0E',
        'mexican-red': '#9E2A2B',
        'anzac': '#E09F3E',
        'butter-milk': '#FFF3B0',
        'teal': '#335C67',
      }
    }
  }
}

Palette 003 (Warm #3)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'melanzane': '#2c061f',
        'space': '#374045',
        'gray': '#49545B',
        'brandy': '#D89336',
        'olive': '#e1d89f',
      }
    }
  }
}

Palette 004 (Warm #4)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'rust': '#bb3b0e',
        'red-damask': '#dd7631',
        'shadow': '#708160',
        'olive': '#d8c593',
        'blush': '#900c3f',
      }
    }
  }
}

Palette 005 (Warm #5)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'dark-sanset': '#b7472a',
        'sunset': '#cf583a',
        'light-sunset': '#eb9788',
        'caramel': '#ffd5ab',
        'sepia': '#fff2e5',
      }
    }
  }
}

Palette 011 (Warm #6)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cocoa-brown': '#22161C',
        'blush': '#6E304B',
        'chestnut': '#A37C82',
        'harvest-gold': '#E2AE6C',
        'carrara': '#F2F1EF',
      }
    }
  }
}

Palette 012 (Warm #7)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'persian-red': '#C43F2C',
        'damask-red': '#DC7035',
        'geraldine': '#F7997D',
        'yellow-orange': '#FCB742',
        'chalky': '#EDC596',
      }
    }
  }
}

Palette 013 (Warm #8)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'shark': '#252B31',
        'nevada': '#5E6668',
        'submarine': '#C1C8C7',
        'light-gray': '#F6FAFB',
        'whiskey': '#D49C6B',
      }
    }
  }
}

Palette 014 (Warm #9)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'green-kelp': '#2B331F',
        'axolotl': '#546747',
        'green-spring': '#BBC8BA',
        'honey': '#FDDCA5',
        'casablanca': '#FAB742',
      }
    }
  }
}

Palette 015 (Warm #10)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'hunter-green': '#171E13',
        'dark-expresso': '#561D18',
        'terracotta': '#A83B25',
        'driftwood': '#B47C4B',
      }
    }
  }
}

Palette 016 (Warm #11)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'tamarind': '#3A1C17',
        'expresso': '#5A291A',
        'cape-palliser': '#9B6549',
        'sandrift': '#AC9676',
        'light-teal': '#DFE4E0',
      }
    }
  }
}

Palette 017 (Warm #12)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'black-pearl': '#02060B',
        'dark-bronze': '#401D08',
        'tuscany': '#BC482B',
        'gray-chateau': '#A3A5A8',
        'pampas': '#F7F6F4',
      }
    }
  }
}

Palette 018 (Warm #13)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'gordons-green': '#050C04',
        'dark-fen': '#224A08',
        'citron': '#90AD2A',
        'wewak': '#F59EAE',
        'french-rose': '#F15273',
      }
    }
  }
}

Palette 019 (Warm #14)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'acapulco': '#80B7A2',
        'moss-green': '#ADD495',
        'dark-wewak': '#F497A4',
        'white': '#FFFFFF',
        'spanish-white': '#ECDBC9',
      }
    }
  }
}

Palette 020 (Warm #15)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cinnabar': '#E13834',
        'flamingo': '#F35F3A',
        'scandal': '#ccfaee',
        'monte-carlo': '#7BD1B8',
        'william': '#3E6C61',
      }
    }
  }
}

Cold Palettes

Palette 006 (Cold #1)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'steel': '#272343',
        'pine': '#34a3a3',
        'teal': '#bae8e8',
        'iceberg': '#e3f6f5',
        'alabaser': '#fafafa',
      }
    }
  }
}

Palette 007 (Cold #2)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'blue-zodiac': '#142850',
        'astronaut': '#27496d',
        'teal': '#0c7b93',
        'gray': '#FBFFFE',
        'cinderella': '#fcd1d1',
      }
    }
  }
}

Palette 008 (Cold #3)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'steel': '#6583a8',
        'gray': '#6b7b8e',
        'pine': '#8fbbaf',
        'seagreen': '#acdeaa',
        'asparagus': '#d6f8b8',
      }
    }
  }
}

Palette 009 (Cold #4)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'magenta': '#e86ed0',
        'cerise': '#eb7ad4',
        'orchid': '#edb5f5',
        'teal': '#b1e8ed',
        'polar': '#e6f8f9',
      }
    }
  }
}

Palette 010 (Cold #5)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'dark-orchid': '#350b40',
        'chestnut': '#ad6c80',
        'chestnut': '#ad6c80',
        'nepal': '#94b5c0',
        'jungle': '#b0c9d1',
      }
    }
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment