Loading Tailwind CSS color palette into Inkscape

Dec 31, 2024 CSS Inkscape JavaScript

I am working on a small project that uses Tailwind CSS. Normally, I always start programming UI things in HTML and then wonder why it's not as clear and clean as I imagined. Most of my work actually always takes place in the backend. In order to proceed with this project in a more structured way, I wanted to create a few user interface layouts before I start programming.

I think the tool of choice for professionals is Figma. However, I thought to myself, with Inkscape I can certainly implement this for my purposes. When I wanted to assign a color to the first elements, I found it very complicated to take the Hex triplet from Customizing Colors and assign them again each time. I would like to show you how to do this more easily.

Gimp color palettes

Inkscape uses the palettes by GIMP. The format of those *.gpl files is pretty easy. Here the first 30 lines of inkscape.gpl.

GIMP Palette
Name: Inkscape default
Columns: 27
# generated by PaletteGen.py
    0   0   0  Black
    26  26  26  90% Gray
    51  51  51  80% Gray
    77  77  77  70% Gray
102 102 102  60% Gray
128 128 128  50% Gray
153 153 153  40% Gray
179 179 179  30% Gray
204 204 204  20% Gray
230 230 230  10% Gray
236 236 236  7.5% Gray
242 242 242  5% Gray
249 249 249  2.5% Gray
255 255 255  White
128   0   0  Maroon (#800000)
255   0   0  Red (#FF0000)
128 128   0  Olive (#808000)
255 255   0  Yellow (#FFFF00)
    0 128   0  Green (#008000)
    0 255   0  Lime (#00FF00)
    0 128 128  Teal (#008080)
    0 255 255  Aqua (#00FFFF)
    0   0 128  Navy (#000080)
    0   0 255  Blue (#0000FF)
128   0 128  Purple (#800080)
255   0 255  Fuchsia (#FF00FF)

Import Tailwind CSS color palette

Just download the file Tailwind-CSS.gpl and put it into the Inkscape user palettes directory as described in The Color Palette — Inkscape Beginners' Guide 1.0 documentation. In my case it was ~/.config/inkscape/palettes. You only need to restart Inkscape and choose the color palette in the

JavaScript behind color palette creation

The follwoing small JavaScript code helped me to extract the data from Customizing Colors. Please note that this code is not written with best practises in mind and that it might stop working if the elements and classes on the documentation change. The code for the hexToRgb function has been copied from RGB to hex and hex to RGB - Stack Overflow by Tim Down.

function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

var grid = document.querySelector("div." + CSS.escape("grid-cols-[repeat(auto-fit,minmax(8rem,1fr))]"));
var colors = grid.querySelectorAll("div." + CSS.escape("2xl:contents")+" > div:first-child");
var output = "";
colors.forEach(function(color) {
    var colorName = color.innerHTML;
    var colorRow = color.nextSibling;
    var colorVersions = colorRow.querySelectorAll("div > div > div." + CSS.escape("px-0.5") + " > div:first-child");
    colorVersions.forEach(function(colorVersion) {
        var rgb = hexToRgb(colorVersion.nextSibling.innerHTML);
        output += rgb.r + " " + rgb.g + " " + rgb.b + " " + colorName + " " + colorVersion.innerHTML + "\n";
    });
});
console.log(output);