A Live Developer Journal

More tips for designing user interfaces

Notes inspired by Refactoring UI

This is a follow on post from tips for designing user interfaces.



Working with color

Use HSL instead of Hex or RGB, because different shades of one color in hex or rgb look nothing alike. Whereas in hsl, it's obvious that these shades share a lot in common.

Shades of blue in hex

Shades of blue in hsl


The hsl values represent (in order) Hue, saturation and lightness.

Color pallettes

A good color pallette consists of:

At this point, I stopped reading and created my own color pallette styleguide, shown below.

color pallette following advice from the refactoring ui book