Colour Picker Shortcut

While working a on number of Shortcuts using Charty, I found myself frequently looking up hex codes for colours in order to style my charts.

To streamline this process I created a colour picker shortcut (pictured below) that allows me to select from a specified palette of CSS colours and return the associated hex code.

I thought I’d share the Shortcuts I used for this in case they are useful to others.

Create Colour Picker Files
Colour Picker

The first shortcut just needs to be run once and builds the picker, by creating a folder of VCF files. You can customise the list of colours included by changing the list near the top of the shortcut (these need to be standard CSS colour names) and re-running the shortcut.

A couple of notes on this shortcut…

  • It retrieves a JSON file from github that maps standard CSS colour names to hex codes.
  • It requires the use of the Toolbox Pro app to create the individual menu items. The action used is one of the free ones, although I’d strongly encourage you to upgrade to the premium version anyway if you haven’t already as it contains a wealth of incredibly useful tools.

The second shortcut presents the colour picker. It is designed to be run from another shortcut and returns the hex code.

If you are using the colour picker multiple times in the same shortcut then you could embed the actions it includes in your own shortcut as suggested by the comments in the shortcut itself. Just remember to change the variable type in the Choose From List action to Contact.

Very nice! Love the idea and execution.

This is great! And it’ll be even more useful to create custom themes in the future :blush: