TailwindCSS color palette for Inkscape

TLDR;

I’ve converted the default tailwind color palette from javascript to an inkscape palette that you can download from here and copy to your palette folder.

Background

Tailwind CSS is my favourite CSS Framework. Although Tailwind is highly customizable, it comes with great defaults, for example a gorgeous color palette.

Inkscape is a great, free vector graphics design tool that supports custom color palettes in GIMP’s palette format (.gpl). To be able to use the tailwind’s color palette in inkscape, I’ve created a custom color palette for inkscape that you can download and use.

Why can this be useful

This can come in handy, if one of the following is true:

• You prefer to start your designs in inkscape before coding them
• You want to create a svg graphic for your webpage
• You just prefer the tailwindcss color palette to the one provided by default in inkscape.

How to use tailwindcss color palette with inkscape

1. Download the palette.
2. Copy it to your palette folder.
   You can find your palette folder, by opening the Preferences window by pressing CTRL+Shift+p in Inkscape and select System in the menu on the left. The palette folder is shown under User palettes. Click the button on the right to open it in the file explorer.
   (On Windows the default folder is %APPDATA%\inkscape\palettes)
3. Restart Inkscape so that the application picks up the new palette
4. Activate the palette, by clicking on the left-arrow icon on the bottom right and selecting Tailwind CSS from the popup as shown in the screenshot below.

To get the get a colors tailwindCSS name, you can hover over the color with the mouse.

5. (Optionally) You can also use it in the Swatches window by pressing Ctrl+Shift+w and clicking on the Left-Arrow icon and selecting Tailwind CSS from the list of palettes.

…and you are done!

How to use tailwindcss color palette with Gimp

As the file format is a Gimp palette, it can also be used as in gimp and the approach is similar.

1. Start by downloading the palette.
2. Copy tailwindcss.gpl to gimp’s palette folder, e.g. %APPDATA%\GIMP\2.10\palettes on windows.
3. Restart gimp
4. Open the Palettes window by clicking Windows -> Dockable Dialogs -> Palettes

5. Now in the Palettes window open the palette in the Palette Editor by double-clicking the icon Tailwind CSS

Source

I’ve written a small F# tool that did the conversion for me, it’s hosted on github.

References

• Tailwind CSS (https://tailwindcss.com)
• Inkscape (https://inkscape.org)
• Tailwind CSS Color Palette Reference (https://tailwindcss.com/docs/customizing-colors#color-palette-reference)
• Source Code (https://github.com/8/tailwind2palette)