Texture & Transparent Maths

This is the kind of post that would benefit greatly from the addition of screenshots, but I’m far too lazy so you’re going to have to put a lot of this into your head and create your own screenshots.

Now that’s out of the way, let’s talk about a situation that came up over the weekend. I was looking at a particular layout I’ve developed and lamented that the solid color background felt a little too empty. What it needed was some kind of texture to make it more visually interesting, but no so much that it takes attention away from the actual content of the page. What immediately came to mind were the linoleum tiles of an old grocery store I went to years ago which had solid color tiles with little dots of black and white color. I thought something like that might just pull off the trick of making things a little more visually interesting without taking away focus from the content of the page. So I needed to make some dots.

Creating Texture

I knew how I wanted to execute the texture: dots and short lines in colors of black, white, and a couple shades of gray with a transparent background. This way I could use this texture over any color I want and the range of colors for the dots would provide contrast with just about any background color I wanted. Perfect!

I fired up Inkscape which has quickly become a favorite application of mine. On a fresh and empty canvas I created eight lines of varying length and made them all the same color. I then selected them, copied and pasted, and with the new group of lines selected, picked a different color. I repeated this process two more times to arrive at four groups of lines with the varying colors I wanted. At that point it was a simple matter of dragging the dots around and mixing them up over a relatively large, square area. Once I felt happy with the spread I selected them all, copied and pasted, and rotated the dots around to increase the density of the dots. I did some more arranging and by the time I was done I had a blob of dots on my screen.

I then broke out the select tool and selected an area within the blob and used Inkscape’s export bitmap feature (under the FILE menu) to export the selection to a PNG file. I then created a simple web page with the background color of the layout I was working with and then set this PNG as the background image. I loaded this page up in a web browser to see how things looked. It wasn’t bad, but the dots stood out a bit too much and the tiling of the image created an obvious pattern that stood out as well. These problems needed to be remedied.

To keep the dots from standing out so much I simply selected all the dots and set their opacity to 50%, making them semi-transparent. This cuts down on the strength of the color and the half-opacity allows the dots to blend with any background color. I exported a new PNG and reloaded the test web page. The colors were more muted, but still carried the texture.

To fix the tiling problem I stared at the page and let my eyes unfocus a bit and picked out what features were standing out. For example there were a group of white dots that, together, especially stood out. I broke those dots up, exported the bitmap, and reloaded the page. The tiling pattern was less obvious, but it was still noticeable. This time there were some black dots on the horizontal edges of the exported bitmap that appeared together when the image was tiled. This grouping stood out and made the tiling pattern obvious, so I move one of the dots off and exported the PNG one more time. Things were looking good. The only problem left was a small, but obvious gap of open space with no dots. I copied a couple existing dots, stuck it into the white-space, exported, reloaded, and everything was jake.

After applying the new PNG to the layout I thought some other elements might do with a bit of texture, especially the supplemental boxes that carry the site’s menus, so I applied the dots to those boxes as well and things looked pretty good, but the background color of menu items when the mouse was over one of them was hiding the underlying texture. I wondered if it would be possible to get the dots to show through.

Transparent Maths

The problem was I quite liked the color being used for the menus’ hover state. If I was going to make this color transparent I needed it to be transparent in such a way that it blended with the background color to produce the same color I was using now without transparency.

Could that be done?

After a bit of internet searching I came across a simple formula used when blending two colors where the bottom color is fully opaque.

Final Color = Top Color * Top Alpha + Background Color * ( 1 - Top Alpha )
or
Fc = TcTa + Bc(1-Ta)

The menu background color (background color or Bc) was #f7ead5 or rgb(247,234,213). The hover state background color for menu items (the color I want to end up with or final color or Fc) was #eecc33 or rgb(238,204,51). All I needed to do was pick a suitable transparency (or alpha) value and plug the values into the formula and solve for Tc. With an alpha value of, say, 50%, the formula could be arranged to look something like this:

Tc = (Fc - (Bc - (Bc * 0.5))) / 0.5

For example, solving for red, the formula looks like:

Tc = (238 - (247 - (247 * 0.5))) / 0.5 = 229

The new transparent color will have a red value of 229. Solving for green gives us a value of 174. However solving for blue gives us a value of -111. We can’t do negative color values, valid values are between 0 and 255. What happens if we set blue to 0?

rgb(238,204,51)
rgba(229,174,0,0.50)
 

You can see that the transparent version (using CSS3’s rgba() color function) is a bit muted in color when compared to the original. In the layout I was working with this was especially noticeable as all the colors in the layout’s palette are especially vibrant.

So what can we do? The first thing I did was rework the formula to solve for the alpha value that results in a blue value of 0.

Ta = (Fc-Bc / Tc-Bc) = (51-213) / (0-213) = 0.76

So an alpha value of 0.76 is the most transparent we can get to achieve the intended color of rgb(238,204,51). Plugging this new alpha value into the formula gives me a final RGBA value of rgba(235,195,0,0.76). When we use this value we see this:

rgb(238,204,51)
rgba(235,195,0,0.76)
 

That looks spot-on. I could further tinker with the alpha value a little to see how much lower I can make it before the color becomes too washed out, but for now I’m leaving it right where it is.

If you start playing around with overlaying transparencies like this you’ll want to watch out for your color limits. I lucked out with in this situation that I didn’t encounter any upper limits, but there are sure to be color combinations that will. My suggestion is to first solve the formulas for the transparency value you want and if any value goes beyond the 0-255 limit start playing with the formulas to find what values will keep you within limits. You may find there simply is no alpha value that will keep you within limits in which case you’re either out of luck or you need to rethink your color palette.

Good luck.

Advertisements

One thought on “Texture & Transparent Maths

  1. Hi there just wanted to give you a quick heads up.
    The words in your content seem to be running off the screen in Opera.
    I’m not sure if this is a format issue or something to do with internet browser compatibility but I figured I’d post to
    let you know. The design look great though! Hope you get the problem resolved soon.
    Kudos

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s