Tuesday, November 11, 2008

RGB with Opacity to Hex Tool

Bad designer! You designed a web-site in Illustrator and decided that every colour should be semi-transparent. Blue (#0000FF) with 70% opacity on top of a Grey background with 50% opacity isn't Blue anymore. Even if I could set different opacities for foreground and background, I'm completely trumped by the browser which inherits the opacity level from its parent container.

So how to fix? Ideally, if you need transparency your designer should apply transparency to the whole layer instead of individual elements, but it usually means re-exporting your Illustrator to JPG or BMP and then using an eye-dropper tool to get the colour. Or, if you're like me, you build a tool using WPF that basically performs the same thing.


To use:

  1. Set the background and foreground color to taste.
  2. Adjust the Opacity of the foreground color. The background colour should bleed through the foreground.
  3. Take the effective colour in the status bar.

Tool for download here.  Code is available here.

Comments, feature requests and bug reports are welcome - just post a comment.