Rob's Tips and Tricks

I do a lot of procedural content generation - thumbnailing, gradients, css, you name it. With luck, many of those pieces of code will make it up onto this site at some point. But today, I'd like to introduce a nice helper tool that I use across the board - Color.rb.

What's it do?


The Color class represents a web color (rgb + a) and allows manipulating it. You can create a color by values (255,0,0) or by string ('#FF0000').

You can lighten, darken, and blend colors together by percentage amounts.

Let's start with a few examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
require 'color'
col = Color.new('#ff0000')
# => #FF0000
col.darken
# => #CC0000
col.darken(0.5)
# => #800000
col.grayscale?
# => false
col.grayscale!
# => #363636
col.grayscale?
# => true
Color.blend('#fff', '#000', 0.5)
# => #808080

Real-world Usage


So that's nice, but where would you actually use this? A simple example is parametric CSS rule generation. Here's a sample CSS file:

sample.css
1
2
body { color: #000; background: #fff; }
.grayed { color: #888; }

Obviously simplified, but it will suffice. You hard-code your values, and manually set gray to be halfway between your text and your background. Simple and clean. However, when you decide you'd like to modify your site's color scheme, it's a major pain going through and changing all the color values. A better way to set things up would be to generate your CSS using ERB, like this:

sample.css.erb
1
2
3
4
5
6
<%
  text = '#520'
  bg = '#e5eeff'
%>
body { color: <%=text%>; background: <%=bg%>; }
.grayed { color: #888; }

Now you can change the colors at the top, and re-use them throughout your rule set. But you can quickly see the problem. The .grayed rule really means "half way between the foreground and background colors." With simple strings for your color values, you can't achieve this. But, with the magic of the Color class, you can write your rules as you mean them and have it work automatically when you adjust your color scheme.

sample.css.erb
1
2
3
4
5
6
<%
  text = rgb('#520')
  bg = rgb('#e5eeff')
%>
body { color: <%=text%>; background: <%=bg%>; }
.grayed { color: <%=text.blend(bg, 0.5)%>; }

This is a very small sample, but I think you'll find as I have that when you have hundreds of CSS rules referencing various values, blending between colors, and so on, having the ability to manage the colors is very valuable.

Download the file here: Color.rb

About

Web home of Rob Morris, software guru and all-around great guy. A place to post and discuss code and the software development lifestyle.

Archive

July 2010 (1)September 2009 (1)August 2009 (2)