Friday, May 2, 2014

Skala Color: a modern OS X colour picker for designers and developers

Recently I worked with the awesomely smart team at Bjango to help them build a new Mac tool. Here it is, Skala Color.

Skala Color is a Mac OS X colour picker plugin. When installed, it sits right beside the built-in colour pickers that everyone is used to like the colour wheel and the crayon selector.

What stands Skala Color apart is its attention to detail. Skala Color was built for the modern Mac OS X environment, with Retina display crispness and carefully crafted animations for a smooth experience.

Skala Color was designed by Marc Edwards to cater for modern designers and developers. Colour selection can be made all within the main gradient area by dragging a circular loupe. Vertical drag selects brightness, horizontal drag selects saturation. Dragging the small handle around the loupe selects the hue.

For finer control, hue can also be selected by the slider below the main gradient area. The slider has a clever fine control mode which becomes visible when dragging the handle. Drag the handle up into the fine control area to get 4x precision hue selection.

When opacity selection is available, a second fine control slider is presented below the hue slider, allowing the same precision selection of opacity level.

Below the colour/opacity selection controls, some real smarts come into play. Alongside preset black and white buttons, a third button is shown if the system clipboard contains any recognisable colours. Skala Color is clever about parsing colours from the clipboard. Many text formats are recognisable just by copying them to the clipboard. Here are some example text formats that it will recognise and automatically convert to colours:

  • #FF7A18
  • rgba(255, 122, 24, 1)
  • [UIColor colorWithRed:0.999 green:0.479 blue:0.095 alpha:1]
  • [NSColor colorWithDeviceHue:0.071 saturation:0.905 brightness:0.999 alpha:1]

Similarly, colours can be exported to a variety of different text formats. All main colour formats that are useful to web and Cocoa developers are supported. As a developer, rather than a designer, this is a feature I use a lot.

Bjango has released Skala Color for free, to help promote their upcoming product Skala. I urge you to check it out.