TailwindCSS color palette for Inkscape - Updated

TLDR;

I've updated the inkscape palette file for tailwindcss 3.4.5.

Background

Some years ago, I've created a custom palette file that can be used with inkscape (and gimp) and wrote a short article about it.

Since writing that article, tailwindcss has evolved and changed their default color palette and so I wanted to update the palette to use the new colors in inkscape.

But meanwhile tailwindcss also changed how they generate the colors, which broke the code I wrote back then to generate the palette.

Today I rewrote that script that generates the palette.

The Script

This time the script is just a single fsharp file.

1. It will grab the latest version of tailwindcss (3.4.5 at the time of writing) from the cdn
2. and try to parse the colors and
3. create a file named tailwindcss.gpl

module Tailwind =
  open System
  open System.Net.Http
  open System.Text.RegularExpressions

  let getJs () =
    let url = "https://cdn.tailwindcss.com"
    let client = new HttpClient()
    client.GetStringAsync(url).Result

  type Rgb = {
    R: byte
    G: byte
    B: byte
  }

  type ColorValue = {
    Value: int
    Rgb: Rgb
  }

  type ColorGroup = {
    Name: string
    Values: ColorValue array
  }

  let getColorGroups js =
    let r = Regex """(?<name>\w+):{((?<weight>[0-9]+):\"#(?<value>[0-9a-f]+)\",?)+?}"""
    
    let getColor (m: Match) =
      {
        Name = m.Groups["name"].Value
        Values =
          m.Groups["weight"].Captures
          |> Seq.mapi (fun i c ->
            let rgb = m.Groups["value"].Captures[i].Value 
            {
              Value = c.Value |> int
              Rgb = {
                R = rgb[0..1] |> Convert.FromHexString |> Seq.head
                G = rgb[2..3] |> Convert.FromHexString |> Seq.head
                B = rgb[4..5] |> Convert.FromHexString |> Seq.head
            }
          })
          |> Seq.toArray
      }
    
    js
    |> r.Matches
    |> Seq.map getColor
    |> Seq.toArray

module Gimp =

  open System.IO

  type RgbColor = {
    Name: string
    R: byte
    G: byte
    B: byte
  }
  module RgbColor =
    let from name (r, g, b) =
      {
        Name = name
        R = r
        G = g
        B = b
      }

  type Palette = {
    Name: string
    Colors: RgbColor array
  }

  module Palette =
    let create name colors =
      {
        Colors = colors
        Name = name
      }

    let write (stream : Stream) (palette : Palette) =
      
      let formatColor (color : RgbColor): string =
        let formatPart p = p.ToString().PadLeft(3)
        $"{formatPart color.R} {formatPart color.G} {formatPart color.B} {color.Name}"
      
      use sw = new StreamWriter(stream, NewLine = "\n")
      sw.WriteLine "GIMP Palette"
      sw.WriteLine $"Name: {palette.Name}"
      sw.WriteLine "#"
      for color in palette.Colors do
        formatColor color |> sw.WriteLine
      ()
      sw.WriteLine ""

    let writeToFile file palette =
      use fs = File.OpenWrite file
      write fs palette


let tailwindColorGroups =
  Tailwind.getJs()
  |> Tailwind.getColorGroups

let gimpColors =
  tailwindColorGroups
  |> Array.collect (fun colorGroup ->
    colorGroup.Values
    |> Array.map(fun colorValue ->
        Gimp.RgbColor.from $"{colorGroup.Name}-{colorValue.Value}" (colorValue.Rgb.R, colorValue.Rgb.G, colorValue.Rgb.B)
      )
    )
  |> Array.append [|
    Gimp.RgbColor.from "black" (byte 0, byte 0, byte 0)
    Gimp.RgbColor.from "white" (byte 255, byte 255, byte 255)
  |]

let palette = Gimp.Palette.create "Tailwind CSS 3.4.5" gimpColors

Gimp.Palette.writeToFile "tailwindcss.gpl" palette

How to use it

1. To run it you can copy/paste the script down below into a file name tailwindcss2palette.fsx and then run:

dotnet fsi tailwindcss2palette.fsx

You need dotnet installed for this to work.

This which will generate the tailwindcss.gpl file for you.

Alternatively you can simply download tailwindcss-3-4-5.gpl from here.

2. Put it in your inkscape palette folder.

In my previous article I explain that step in more detail.

Also you might want to take a look at the inkscape manual.