Colorist: Color Manipulation For WebHeads

While writing color customization code for a recent project, I once again ran into the fact that the existing color gems for Ruby seem to be built for vastly different purposes. To that end, I decided to write a new library for dead-simple manipulation of colors with an emphasis on ease-of-use and being useful for web developers.

Installation

gem install colorist

The Basics

To instantiate a color in Colorist, you use a number of methods:

require 'colorist'
include Colorist

red = Color.new(0xff0000)
red = 0xff0000.to_color
red = "red".to_color
red = "#f00".to_color
red = Color.from_rgb(255,0,0)

Note: I include Colorist in these examples, but there’s no reason you can’t leave it namespaced i.e. Colorist::Color instead.

The idea is to give maximum flexibility without making it complicated. Once you’ve instantiated a color, you can figure out a few tidbits about it and perform some basic operations:

red.brightness # => 0.299
red.r # => 255
red.invert # => #<Color #00ffff>
red.text_color # => #<Color #ffffff>
red.to_s # => "#ff0000" 
red.to_s(:rgb) # => "1.000, 0.000, 0.000"

Operations

The real value of Colorist comes in comparison and addition. You can use normal operators with the colors to add them together, subtract them, and compare them based on brightness. You can also do this with the string or numeric representations of colors:

red = 0xff0000.to_color
green = 0x00ff00.to_color
yellow = red + green
yellow = "red".to_color + "green" 
yellow.to_s # => "#ffff00" 
red - 0.2 # => #<Color #cc0000>

Comparisons work off of the brightness of a given color. You can also calculate the contrast between two colors using the W3C’s formula:

red = "red".to_color
red > "black".to_color # => true
red > "white".to_color # => false
red.contrast_with("green".to_color) # => 0.500653594771242

Get Coloring!

That’s most of the basic functionality, for all of the details you can view the RDoc on RubyForge. The source is available on GitHub and there is a Lighthouse project for any bugs or feature requests. Enjoy!

Share:

5 Responses to “Colorist: Color Manipulation For WebHeads”

  1. Kevin Marsh

    Cool! I love the math of color bits, how about something with Ranges to gradients? Like, Color.new(0x000000)..Color.new(0xffffff).to_a => [#<color>, #<color>, #<color>, #<color>, #<color>, #<color>, #<color>, #<color>, #<color>, #<color>] (got those values by posterizing the gradient in Photoshop to ten steps, not sure of the actual algorithm)
  2. Michael Bleigh

    @Kevin: That's a great idea! Look for it soon :-)
  3. Shalmanese

    Does colorist support HSV math as well?
  4. heri

    out of curiosity, (and maybe because i'm less experienced than you guys), could you tell me how this is used? by ui designers delivering custom stylesheets? for custom niche web applications?
  5. Michael Bleigh

    @heri: we use it to generate a color scheme for customized web apps, so the user puts in one color and we use color math to generate a palette of tones that work together.


Leave a Reply