Tailwind Color Palette

Using and customizing the color palette in Tailwind CSS projects. Explore 242 colors in the OKLCH color system for Tailwind CSS v4. Learn how to use the wider P3 gamut for richer hues and better contrast in your designs.

Create and customize beautiful Tailwind CSS color palettes. Generate, edit, and export colors for your design with our intuitive color generator tool. Copy any Tailwind color with our beautiful Tailwind 4 color palette.

Click to copy any HEX, OKLCH, or Tailwind 4 color class. Easily create and customize Tailwind CSS color palettes with our intuitive palette generator. Explore, design, and preview beautiful color schemes tailored for your projects.

Perfect for designers and developers looking to enhance their UI with Tailwind CSS. Free online Tailwind CSS color picker tool. Browse complete color palette and copy class names with one click.

Supports dark mode and smart color recommendations for developers and designers. About Tailwind CSS Color Palette Generator Generate complete Tailwind CSS color palettes with all 10 shades (50-950) from any base color. Perfect for developers who want to extend Tailwind's default color system with custom brand colors while maintaining consistency with the framework's design principles.

The complete Tailwind color palette in HEX, RGB, HSL, CSS variables, and classes. Ready to copy and paste into your project. Free color reference for developers.

Tailcolor helps you create a custom color palette for your Tailwind project using a single color as the base. You can also explore related color palettes and learn how to add your palette to your Tailwind config file. Color.js created by Lea Verou (co-editor of CSS Color 4 and 5) and Chris Lilley (co-editor of CSS Color 3, 4, and 5; W3C representative to ICC).

Co-maintained by Isaac Muse, Jonny Gerig Meyer, and Adam Thompson-Sharpe, with lots of help from a community of contributors.