ColRD: Image DNA

Exciting news on! Today we’re announcing the public beta of Image DNA, available exclusively on the Chrome Webstore. Image DNA is an application that aides you with intelligent extraction of colors from images. The colors extracted are spread evenly across the humanly visible spectrum; so you’ll notice, for example, although there is not much blue in this picture (above), the popular colors extracted will be evenly spread throughout the blue/brown spectrum—this gives you a wider range of colors to select from, with less choices.


  • Drag and Drop images into the browser for automatic extraction (FileReader), or enter a URL.
  • Use the EyeDropper or Color Picker for manually selecting colors.
  • Zoom and pan around image to find the perfect color.
  • Breakdown of top 78 unique and simultaneously most reoccurring colors.
  • Download your color palette for Illustrator, Photoshop, or GIMP.
  • Share your palette on =)
Download for free at the Chrome Webstore; Image DNA.


adminColRD: Image DNA

ColRD: Gradient Creator

Tonight, on ColRD, we released the latest rendition of Palette Creator, along with our newest addition; the Gradient Creator! This new webapp makes it fun and easy to create CSS3 linear gradients ? UPDATE: You can also download the Gradient Creator as a Chrome webapp.


  • Drag & Drop GIMP Gradient (.GGR) files into the browser to view them!
  • Delta Swatch:  Shows the colors most similar to the one you’re choosing of the 4096 websmart colors (in CIE-Lab color space).
  • Keyboard goodness with Color Picker:  HSL, RGB, and HEX chooser.
  • Preview:  See your gradient in full-screen mode before you save it.
  • Flip:  Flip your gradient, so:  first is last, and last is first.
  • Intriguing new interface to create gradients! …

Do we need a new gradient editor GUI?

Gradient editors haven’t changed much historically, the same dynamic is used throughout GIMP, Illustrator, Inkscape and Photoshop. For me, these interfaces are clunky, leading to repetitive stress of the wrists and fingers, which prompted me to think, “There must be a better way!”.  One of the most click-saving changes was combining the Color Picker and Gradient Creator as one unit—there are no popup windows or “Ok” buttons.

Traditionally gradient editors allow users to place a point in space that radiates it’s color in both directions evenly. This is the way that computers think about gradients; color points in space, blended (in the case of <canvas>) linearly.

Description of the Gradient Creator;

  • ColRD gradient creator presents itself as color blocks—just like a palette.
    • Inside each color block you will find the midpoint controller—these controllers allow you to stretch the color towards the left or the right of the block.
    • To the left and right of the color block are col-resize controllers—these allow you to scale the width of the color block and the adjacent one.
  • Color blocks can be reorganized by dragging and dropping, without rescaling the color block or the ones around it.
  • If you drag and drop a color block onto the Color Picker, the color will be removed from your gradient (re-absorbed into color space!).

Future developments;

  • GGR, SVG, and CSS3 exporting (soon, as in this week).
  • Desktop wallpaper generator; textures, gradients, and user defined sizing (see previous article), along with the Gradient Noise generator.
  • Time-machine (undo and redo).
  • The user could split the midpoint, creating a shadow of itself in the opposite direction, this way the user could control the color blur on one edge (as it is now), or both edges simultaneously.  The shadow could be fixed to the inverse of the controller (SHIFT-KEY) to create even blurs, or controlled on it’s own independently.

If you have any ideas for the future, let us know!

Random thought;

For those interested in exotic gradient editors, SpectraG is a project that uses mathematic equations to generate gradients;


adminColRD: Gradient Creator

ColRD: website

ColRD is a new website to help you find Colors, Palettes, Gradients and Patterns.  It was developed by Daniel Christopher, of LucentPDX, and myself. The best place to get started is the Discover page.  There you can narrow down results using filter by colors, or types, as seen in the above (Red/Black/Brown Patterns).

After many years of selecting colors, I haven’t come across the perfect color picker… With that in mind, the most natural for me so far has been combining the powers of RGB w/ HSL. This is what we did for the ColRD create pages, the Color Creator and the Palette Creator;

Once you create some content, or find some things you like, you can start building your own Swatch, where you can quickly find the content that you like.  Check out my page, cool stuff!

Let us know what you think, and how we can improve your experience!


adminColRD: website

ColRD: Color Extractor

UPDATE: Renamed to Image DNA and released as a Chrome Extension, read more.

I spent last weekend working on a color palette extractor in HTML5. These examples illustrate automatically picked 7-color and the 90-color palette to represent the image. Although the results are organized by the color popularity within the palette, colors that don’t show up much are given the same diversity in the 90-color palette.  For instance, in the following image, the diversity of red in the 90-color palette is given equal weight to green;

<img class="aligncenter size-full wp-image-453" title="Screen Shot 2011-07-31 at 11.51 Discover More Here.52 PM” src=”” alt=”” width=”544″ height=”241″ srcset=” 1006w,×133.png 300w” sizes=”(max-width: 544px) 100vw, 544px” />

Speed is looking good, these images are taking around 200ms to process.

More to come on this, and future developments in the land of color ?


adminColRD: Color Extractor