ColorGraffle: A Custom OKLCH Color Palette Generator for TailwindCSS

Enter an OKLCH color and generate a custom color palette and the code you need to add to your TailwindCSS config file to use it.

Input Colors

Swatches

exampleBlue
 
50
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 
800
 
900
 
950
 
(default)

TailwindCSS Config

Notes

  • OKLCH is a great color space for web design, it is perceptually uniform and has a very wide gamut
  • OKLCH makes it easy to generate color shades from a single color
  • This tool generates a custom color palette from a single color or colors using OKLCH
  • This tool also generates the code you need for your TailwindCSS config file to use your custom palette
  • Not all browsers support OKLCH colors, so fallbacks are necessary
  • TailwindCSS does not support color fallbacks out of the box, so a PostCSS plugin is required to generate fallbacks
  • This tool does not generate fallbacks, but it does generate the code you need to add to your config file to generate fallbacks
  • PostCSS and the postcss-oklab-function plugin are required to generate the fallbacks
  • This is v0.0.1 and is a very early version of this tool, there are likely bugs and issues

More Reading

Customizing Colors in TailwindCSSUsing OKLCH Colors in TailwindCSS@csstools/postcss-oklab-functionOKLCH Color ConverterOKLCH in CSS: Why We Should Quit RGB and HSL

Credits

This work is deeply indebted to and derivative of work by Björn Ottosson the originator of the Oklab and OKLCH color spaces. Read more about the Oklab color space from his blog link below.

A perceptual color space for image processing