Category: Visual Design

CSS hue-rotate: Why doesn’t hue rotation by +180deg and -180deg yield the original color?

Scroll down for answer 2. CSS filter: hue-rotate(XXdeg) gives unexpected results. This seems to be why –

Question:

By reading HSL/HSV color theory, I get the impression that hue component is a cyclical attribute that repeats every 360 degrees and can be changed independently of saturation and lightness/value. Correct me if I am wrong, but these statements logically follow the previous definition:

  • Rotating hue by 360 degrees yields the same color
  • Rotating hue by 180 degrees twice yields the original color
  • Rotating hue by 180 degrees followed by -180 degrees yields the original color
  • However, only the option 1 is correct. Rotating hue 4 times by +90 degrees yields a color that isn’t even remotely similar to the original.

Furthermore, using -webkit-filter and SVG’s 

don’t produce the same result for the same rotation. On the other hand, colors produced by SVG filters are consistent across browsers.

Is there any “hidden” property of hue rotation that makes the operation not associative?

Examples of both webkit filters and SVGs can be found here: http://jsfiddle.net/maros_urbanec/ARsjb/5/

Answer:

In both CSS and SVG filters, there is no conversion into HSV or HSL – the hueRotation shorthands are using a linear matrix approximation in RGB space to perform the hue rotation. This doesn’t conserve saturation or brightness very well for small rotations and highly saturated colors – as you’re seeing.

A true hue rotation, would first convert the input RGB color to HSL, adjust the H and then convert back to RGB. Filters don’t do this. And this conversion can’t be accurately approximated with a linear matrix, so while the hue is accurately changed(mostly), the saturation and brightness goes all over the place. These effects are non-linear, so adding smaller ops together results in different colors vs. doing one big operation.

(The difference between huerotation in SVG and CSS filters could be due to using different color spaces (sRGB vs. linearRGB) – these should be the same.)

Update: I got interested enough to go and do a manual comparison. As you can see, filters do a terrible job of hue rotating pure colors in the 0 to 180 degree range. This image compares a manual hue rotation done by plugging in hsl colors manually (outer ring) vs. a filter hue rotation on the base color (inner ring)

hue-css-rotate-bright

But, they do a better job at less pure colors like hsl(0,50%,75%) as you can see.

hue-css-rotate-faded

source

The Power of Minimalism: A Story of Redesigning Yelp

Excellent article – highly recommended.

Design by committee is death by a thousand cuts.

It kills slowly, as more and more people weigh in with their opinions, until the “revised” design looks like a stew of lesser parts. It certainly doesn’t need to be that way, especially for large companies like Yelp.

We chose to redesign their site to show how usability testing done properly can unleash the power of just one. Based on our experience as designers at different companies, we found usability testing to be the best defense for design decisions.

When in doubt, let the user stand between you and overbearing stakeholders and the evidence will speak for itself.

redesigning-yelp-jc-repainted

source

Center and crop images with a single line of CSS

It’s simple. Set your image crop dimensions and use this line in your CSS:

img {
    object-fit: cover;
}

That’s it. No need for unsemantic, wrapping divs or any other nonsense.

This technique works great for cropping awkwardly-sized avatar pictures down to squares or circles. Take this wide photo of a bear below for example. Once object-fit: cover is applied to the image and a width and height are set, the photo crops and centers itself.

source

Compositing And Blending In CSS

The Blend Modes

Okay so we’ve established that each background layer can get its own blend mode which specifies how it blends with the layers beneath it. But what blend mode options do we have?

There are 16 blend modes available in CSS: normal (which is the default blend mode and means that no blending is applied), multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

Each filter, when applied to an image, for example, will give a different end result—the colors of the image are going to be changed based on the mode you choose.

Includes a tool to test blend modes:

css blender

source