Color Picker

BuzzLY

I've been mucking around with GD, since I haven't had much opportunity to play with it. We definitely need to get something into the book about it 🙂

For fun, I created a true color picker page. You can see it in action here.

Also please feel free to criticize my code. It's my first major GD app, so if there's something I did in there that could be done more efficiently, I'd like to know. Your feedback is very much appreciated.

The app has been tested in Mozilla 1.7 and IE 6. If it doesn't work in your browser, please let me know (although I don't know if I'll have a lot of time to devote to making it more browser-friendly). If you can't click the palette to load colors, you can always enter parameters in the URL.

It takes three different forms of input. First you'll always need scale. 0 for red, 1 for green, and 2 for blue: ?s=1

Next, either put in an rgb value: &rgb=33FF99 (example)

or -

Enter x, y, and depth values: &x=148&y=197&d=168 (example)

or -

Enter a valid color Name: &color=HotPink (example)

The RGB values are hex, and the x/y/depth values are decimal. The color name must be valid or the app will pick a random web safe color.

Have fun, and thanks for your feedback!

onion2k

Originally posted by BuzzLY
I've been mucking around with GD, since I haven't had much opportunity to play with it. We definitely need to get something into the book about it 🙂

I'm writing a book specifically about GD... well.. dynamic web graphics actually.

Nice colour picker.

Mordecai

Hmm.. image doesn't load for me. Tried Firefox and IE to no avail. Also, there's an error (a notice, actually) at the top:
Notice: Use of undefined constant validColor - assumed 'validColor' in /home/buzzly/public_html/projects/colors/colorpicker.php on line 13

If you want any pointers, I'm considered by many to be a GD guru 🙂

BuzzLY

I've been editing it. The notice was only up there for a minute -- when I turned on error_reporting(E_ALL), I saw it and fixed it immediately. It should be working just fine in IE now. As of now, it only works (clicking the image) in IE.

BuzzLY

New and Improved. Check it out and let me know if you think it could be improved, streamlined, etc.

planetsim

I really gotta get into GD very nice work there Buzz.

onion2k - can we get a heads up on when your GD book is coming out

zapa

looking good.

if you looking to add more how about..

Randomize button? (select rando color(s))

use a small area to show Color text over colors.

attach color # to a name (find them on the net) i.e. 000000, FFFFFF (black white)

you can also brake it up into Warm and Cool, pastel, Monochormic, split complementery, along with pimarie & secondrie

that should keep you busy for some time 🙂

BuzzLY

[FONT=century gothic]Randomize button? (select rando color(s))[/font]

I do this already. If you go to the "home" page by clicking on the title, it will pick a random web-safe color. Try refreshing a couple of times, and you'll see what I mean.

[FONT=century gothic]use a small area to show Color text over colors.[/font]

I thought of that, but I'm not sure what colors I would choose. The complementary colors area shows how black and white look on the colors, but I'm not sure what other colors to choose.

[edit]
Ok, I did this. I am using a hidden div that is made visible by clicking the color sample on the right. Check it out and see if this is what you were talking about.
[/edit]

[FONT=century gothic]attach color # to a name (find them on the net) i.e. 000000, FFFFFF (black white)[/font]

I thought of that, too. Wouldn't be too hard, as I think most of them are web-safe colors, anyway. The idea was to make the color picker pretty much self-contained, so it'd have to be an array, not a db lookup.

[edit]
Ok, I put in a select box where you can choose between all of the named colors. It will also default to the current named color if by some remote chance the user chooses it with the picker (very unlikely). To look up a specific color via the URL, simply type http://www.ultimatespin.com/projects/colors/colorpicker.php?color=HotPink , for example.
[/edit]

[FONT=century gothic]you can also brake it up into Warm and Cool, pastel, Monochormic, split complementery, along with pimarie & secondrie[/font]

I'd love to do that as well, but I'm not sure there is a way to programmatically tell which category a certain color belongs to. The whole idea of this page is to allow users to choose any color on the 24-bit pallete and give some information about that color (web value, complements, closest web-safe color, etc.) You're talking about a site with true color wheel and color theory -- I may do that some time, but it's not exactly in the realm of this app.

[FONT=century gothic]that should keep you busy for some time 🙂[/font]

Yes, you're probably right, but my "free" time is pretty much occupied by other projects at the moment. But I do thank you for your suggestions. They are good ones 🙂

zapa

lol that was quick, over nighwork.

Grate work! 🙂 wish i can be good as you one day in PHP, only been doing this 3months its fun.

zapa

if you like to add some sliders check out
http://webfx.eae.net/dhtml/slider/slider.html

BuzzLY

It's just not good enough for you, is it!? 😃

Sliders are cool... but the main reason for creating the app was to use the GD library to create dynamic color maps. I have been thinking about putting together a site that deals with every aspect of color, including picker apps, color theory, and more, and making the True Color Picker just one part of it. Another part could be the slider app, one slider per RGB component.

If you want to see a really cool color app, check out ColorDabbler over at www.arcticowlsoftware.com. If you're into color, that's the app to have.

Color Wheel Pro is good, also, if you want a quick and dirty way to view how a website or company letterhead looks with colors you pick. www.color-wheel-pro.com

drawmack

Buzz,
It would be cool if there were a place to type in a color code (hex or decimal) and have the app update everything on the page based on the code typed in. That way if someone has a base color in mind they could use the app for the other stuff it offers without needing to find their base color on the map.

BuzzLY

yeah... good point. You'd think I'd have thought of that, huh?

Sometimes it's the simple things...

Weedpacket

Originally posted by BuzzLY
yeah... good point. You'd think I'd have thought of that, huh?

Sometimes it's the simple things...

As well as hex code (long and short forms?) or rgb triple, someone might want to try "magenta" or "slateblue".

BuzzLY

Yes, that's probably true. However, any user that doesn't notice the dropdown directly above the text input, where they can choose a color by name, is probably blind, and wouldn't benefit from a color picking application anyway.

As for the short-hand hex codes, I can easily accomodate that. RGB triples isn't too difficult, either, but dammit, I can't just hand EVERYTHING to the user on a silver platter!

drawmack

Originally posted by BuzzLY
Yes, that's probably true. However, any user that doesn't notice the dropdown directly above the text input, where they can choose a color by name, is probably blind, and wouldn't benefit from a color picking application anyway.

Why not put a javascript in there that if someone types in a color name (or any character greater then F) it pops up an alert box that just says "Look Up"

Weedpacket

Monitor the contents of the field as they type; make the legend flash (or make a rude noise) if they stray from the expected format(s).

BuzzLY

Ok, now you're just being spiteful.

I take comfort in the knowledge that such suggestions are manifesting. I think I'm done coding this monster 😃

Weedpacket

Okay then, if it's spite you want...
A colour cube. Draw back three faces in full and the mark out the other three in wireframe (all appropriately coloured), and pinpoint the chosen colour in the cube - with axes drawn in to relate the point to the three back faces.

Or draw the three orthogonal faces (of which you currently show one) that pass through the selected colour - at right angles to each other (modulo projection into a two-dimensional image).

zapa

one more 🙂
http://www.pixy.cz/apps/barvy/index-en.html