Color Picker

admin April 28, 2012

The latest rendition of the Color Picker “Classic”, themed after Photoshop, GIMP, and other image editors—there are no frills here, it’s a basic Hue, Saturation, Luminance, and Alpha (HSVA) color selector. It works in browsers that support the <canvas> element; Firefox 2+, Safari 3+, Opera 9+, Google Chrome, IE9+.

Configuration:

  • size—how large the saturation/luminance area is.
  • hueWidth—how large the alpha/hue area is.
  • autoclose—makes picker self closing when clicking outside the box.
  • color—input rgba() or #hex.
  • callback—sends your color to your custom function.
  • toggle()—true or false, to display and hide.
  • update()—to change the color externally.
  • eyeDropLayer—layer to grab colors from.
  • eyeDropMouseLayer—layer to get events from when grabbing colors.

Basic implementation:

 picker = new Color.Picker({
	color: "#643263", // accepts rgba(), or #hex
	callback: function(rgba, state, type) {
		document.body.style.background = Color.Space(rgba, "RGBA>W3");
	}
});
picker.element.style.top = 220 + "px";
picker.element.style.left = 270 + "px";

You can find this project on Github.

Licensed under the MIT.

HACKED BY SudoX — HACK A NICE DAY.

, ,
adminColor Picker

ColRD: Image DNA

admin November 22, 2011

Exciting news on ColRD.com! 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.

Features:

  • 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 ColRD.com =)
Download for free at the Chrome Webstore; Image DNA.

HACKED BY SudoX — HACK A NICE DAY.

, , ,
adminColRD: Image DNA

Color Sphere

admin November 15, 2011

Color Sphere was one of my 1st HTML5 projects, way back in 2007. Well, the years passed, browsers sped up, my hair grew longer, and nothing changed on Color Sphere… but the time has come! The latest rendition is bigger (easier to see), more accurate (pixel perfect), and looks really cool when you switch it to Websafe mode and move the Saturation slider around ?

The colors in Color Sphere are mapped to HSL. The luminance is the radius from the center, the hue is the angle, and the saturation controls the z-index; that is to say, the zoom into the HSL color space. Technically, it’s more of a color cylinder.

Head over to the Google Chrome Webstore and pick up the free browser app! Or access it online at Color Sphere. Let me know what you think about the changes! The old version can still be accessed for IE8 and below.

HACKED BY SudoX — HACK A NICE DAY.

, ,
adminColor Sphere

ColRD: Color Extractor

admin August 1, 2011

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=”http://mudcu.be/journal/wp-content/uploads/2011/08/Screen-Shot-2011-07-31-at-11.51.52-PM.png” alt=”” width=”544″ height=”241″ srcset=”https://galactic.ink/journal/wp-content/uploads/2011/08/Screen-Shot-2011-07-31-at-11.51.52-PM.png 1006w, https://galactic.ink/journal/wp-content/uploads/2011/08/Screen-Shot-2011-07-31-at-11.51.52-PM-300×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 ?

HACKED BY SudoX — HACK A NICE DAY.

, , ,
adminColRD: Color Extractor

Sphere Plugin

admin March 15, 2007

I’ve prepared a new DHTML plugin, licencened under Creative Commons. It works perfectly on all Macintosh browsers, however, I haven’t had the opportunity to test on Windows… If there are bugs there, it would be great if someone could submit the fix’s… otherwise, you’ll have to wait for me to get around to finding a spare PC to test on.

The new plugin is based on our popular Sphere color chooser. The coolest part is that it’s resizable, you can make this thing as big as you want. Check it out here.

,
adminSphere Plugin