Pelle Wessman
Aug 25, 2017 · 1 min read

One thing I had a problem with in the beginning was not realizing that the HSV/HSB a designer had worked with in Photoshop was not the same as HSL — that Lightness and Brightness are two pretty different things. So if one wants to work with HSV/HSB instead because the designers do, then one needs something to convert the colors. (I built a helper for my needs https://github.com/voxpelli/sass-color-helpers)

I also stumbled on the issue that Šime Vidas points out — that contrast can become somewhat bad at times when working with colors like this. So I also added the contrast algorithm right into my Sass helper and stylesheets to put in some safe guards against it:

$frontColor = ch-best-color-contrast($backgroundColor, $colors: ($frontColorAlternative1, $frontColorAlternative2))

That printed me a warning at build time if none of the options provided had good enough contrast and else pick the first alternative that had good enough contrast. Great for inclusion in mixins.

I love how working with colors this way makes it so easy to create self-contained components that others can easily recolor themselves while ensuring a consistent appearance and an accessible contrasts — empowers the team to extend existing components into new areas and easily adapt them to new needs that might arise.

)
    Pelle Wessman

    Written by

    Web developer at Swedish newspapers @sydsvenskan / @hdhbg. Open source contributor. @indiewebcamp participant.