A useful Sip colour picker format

If you’re a designer using the Sip for Mac app to pick colours, you might find this format useful. I call it the “web designer hex”. Hex is probably the easiest format to use in your CSS files and different applications for simple copy-pasting. Still, when you’re picking colours off of your inspiration sources for examination, it’s easier to think in the HSB colour system. As Erik D. Kennedy puts it, a strong HSB advocate and author of excellent articles on design puts it:

Therefore, I set this format up to display additional hue, saturation and brightness values when I have the magnifier open and only copy minimalist hex value into the clipboard (#E05049 in this case).

You can import this format by downloading and opening this file. If you prefer to manually set it up, click on the Sip icon in your toolbar, select the format chooser and click on the big “+” icon to create a new format. Once in there, give it a simple title (e.g. “web designer hex”) and enter this simple snippet as your Clipboard format.

{
  "function" : "upper",
  "x" : "#hex[red]hex[green]hex[blue]"
}

For the menu and magnifier formats paste this function.

{
  "y" : {
    "function" : "upper",
    "x" : " #hex[red]hex[green]hex[blue]"
  },
  "function" : "concat",
  "x" : {
    "function" : "concat",
    "x" : {
      "function" : "concat",
      "x" : "H:",
      "y" : {
        "function" : "round",
        "x" : {
          "function" : "mul",
          "x" : "[hue]",
          "y" : "360"
        },
        "y" : "0"
      }
    },
    "y" : {
      "function" : "concat",
      "x" : {
        "function" : "concat",
        "x" : " S:",
        "y" : {
          "function" : "round",
          "x" : {
            "function" : "mul",
            "x" : "[saturation]",
            "y" : "100"
          },
          "y" : "0"
        }
      },
      "y" : {
        "function" : "concat",
        "x" : " B:",
        "y" : {
          "function" : "round",
          "x" : {
            "function" : "mul",
            "x" : "[brightness]",
            "y" : "100"
          },
          "y" : "0"
        }
      }
    }
  }
}

There you have it. Go out there and pick some nice colours 🙂

Published by

metakermit

Building apps, analysing data at Punk Rock Dev and sharing weird & cool photographs, drawings, music, films, games... More about me here. You can get new blog posts via RSS or follow @metakermit on Twitter where I also announce new stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *