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

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: Gradient Creator

admin October 22, 2011

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.

Features:

  • 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;

http://sourceforge.net/projects/spectrag/

HACKED BY SudoX — HACK A NICE DAY.

, , ,
adminColRD: Gradient Creator

Color Accessibility in the Browser

admin October 20, 2011

Announcing the release of color-blindness daltonization + simulation bookmarklets; daltonize.appspot.com

The Chrome Daltonize extension is faster in many cases, and uses less bandwidth than the bookmarklet—highly recommended when Google Chrome is an option!

What is daltonization?

“Daltonization is a process performed by the computer that allows people with color vision deficiencies to distinguish a range of detail they are otherwise excluded from perceiving. For instance, in the daltonization of an Ishihara test plate (a popular test of color vision) numbers emerge from a pattern that were once invisible to the color blind person.”

Read more about the daltonization algorithm used on daltonize.org.

Technical hurdles with Cross Domain policies;

The following highlight some of the options to get around Cross Domain issues with images;

  1. CORS (Cross-Origin Resource Sharing)
    • Must be recorded in the header of the image hosting website, and the browser must support CORS. This is the best option, it handles the image as if it were any other image. When creating the image use; image.crossOrigin = true;
  2. Flash (crossdomain.xml)
    • The website must have a crossdomain.xml in their root directory, and the browser must have Flash installed. When that is all in place, you can use the ExternalInterface to copy the base64 from Flash into a Image tags src, and subsequently onto <canvas>.
  3. UniversalXPConnect (Firefox)
    • Certain versions of Firefox support this… I haven’t been able to get it working lately, anyone? When it works, it requires the user to click “Accept” to a security box.
  4. Base64 proxy from external server.

CORS is the preferable method to access images from external domains. The problem is knowing whether a server supports it or not—the following snippet is a hack to figure out whether an browser/server combination supports CORS, or not;

function hasCORS(src, callback) { // Cross-Origin Resource Sharing (CORS)
	var method = "get";
	var req = new XMLHttpRequest();
	if ("withCredentials" in req) {
		req.open(method, src, true);
	} else if (typeof XDomainRequest != "undefined") {
		req = new XDomainRequest();
		req.open(method, src);
	} else { // browser doesn't support cors
		callback(false);
	}
	if (req) { // browser supports cors
		req.onload = function(response) { // server supports cors
			callback(true);
		};
		req.onerror = function(response) { // server doesn't support cors
			callback(false);
		};
		req.send();
	}
};

Hope this helps someone with the same problems!

HACKED BY SudoX — HACK A NICE DAY.

adminColor Accessibility in the Browser

Background Generator

admin October 8, 2011

I worked on a future release of BG a few months back, and am excited to share some screenshots! It’s exciting to be able to produce wallpapers for my Desktop in my Browser. Since creating these images, I’ve found that by using JSZip and Downloadify the browser can generate HUGE, high-resolution and print-ready graphics. The largest file that I’ve successfully exported from Javascript is 17.5MB and 1,264 x 65,320 pixels… that’s enough resolution to print a 30×30 inch poster in 300DPI… more on this later! In the meantime, here are a few of the wallpapers that came out pretty nice:

HACKED BY SudoX — HACK A NICE DAY.

, , ,
adminBackground Generator