Best way for user to select a colour

andrewgarn · July 24, 2008

Right so I'm generating images for users for which part of the slection is choosing a hex colour as background

I'm having trouble working this into a form.

How would you recommend letting a user choose a colour? (any hex value will work)

I wanted to create a selection box where the background of the selection options were the colour in question, but have no idea how to do this

Psycho · July 24, 2008

Well, you could do it with just CSS

<html>
<body>

<select onchange="presentData(this);" id="dbTbls" style="color:#ffffff;">
    <option style="background-color:#0000ff;" value="#0000ff">Blue</option>
    <option style="background-color:#ff0000;" value="Hello Universe!">Red</option>
    <option style="background-color:#00ff00;" value="Hello Foo!">Green</option>
</select>

</body>
</html>

But that limits you to specific values and the user can't enter custom values. I would suggest something like this which let's the user select some predefined values or enter custom values (you would need to add some validation for user entered values):

<html>
<head>

<script type="text/javascript">

function changeColor(inputObj) {

    if (inputObj.value)
    {
        document.getElementById('hex').value = inputObj.value;
        showColor(inputObj.value);
    }
    else
    {
        document.getElementById('hex').value = '';
        showColor(inputObj.value);
    }
    return;
}

function customColor(outputObj) {

    document.getElementById('colorSel').value = outputObj.value;
    if (document.getElementById('colorSel').value != outputObj.value) {
        document.getElementById('colorSel').selectedIndex = 0;
    }

    showColor(outputObj.value);
    return;
}

function showColor(colorVal) {

    if (colorVal)
    {
        document.getElementById('test').style.backgroundColor = colorVal;
        document.getElementById('test').style.border = '1px solid black';
    }
    else
    {
        document.getElementById('test').style.backgroundColor = '#ffffff';
        document.getElementById('test').style.border = '';
    }
    return;
}

</script>

</head>

<body>

Color: <select onchange="changeColor(this);" id="colorSel" style="color:#ffffff;">
    <option value="" style="color:#000000;">--Select Color--</option>
    <option style="background-color:#0000ff;" value="#0000ff">Blue</option>
    <option style="background-color:#ff0000;" value="#ff0000">Red</option>
    <option style="background-color:#00ff00;" value="#00ff00">Green</option>
</select><br>

Hex Value: <input type="text" id="hex" name="hex" onchange="customColor(this);"><br>

<div id="test" style="width:80px; height:40px;"></div>
</body>
</html>

lemmin · July 24, 2008

This is pretty ridiculous, but I was bored at work so here is something to get you started:

<html>
<head>
<script language="JScript">
var ro=0, go=0, bo=0;
function test()
{
r=ro;
g=go;
b=bo;
divTest.innerHTML = "";
for(var i=0;i<26;i++)
{
	rh = r.toString(16)
	if (rh.length == 1)
		rh = "0" + rh;
	gh = g.toString(16)
	if (gh.length == 1)
		gh = "0" + gh;
	bh = b.toString(16)
	if (bh.length == 1)
		bh = "0" + bh;
	divTest.innerHTML += "<div STYLE=\"width:2px;height:20px;display:inline;background-color:#"+rh+gh+bh+"\" onclick=\"inTest.value=this.style.backgroundColor\"></div>";
	((r+10) > 255) ? r=255 : r+=10;
	((g+10) > 255) ? g=255 : g+=10;
	((b+10) > 255) ? b=255 : b+=10;
}
}
function redUp()
{
((ro+10) > 255) ? ro=255 : ro+=10;
test();
}
function redDown()
{
((ro-10) < 0) ? ro=0 : ro-=10;
test();
}
function greenUp()
{
((go+10) > 255) ? go=255 : go+=10;
test();
}
function greenDown()
{
((go-10) < 0) ? go=0 : go-=10;
test();
}
function blueUp()
{
((bo+10) > 255) ? bo=255 : bo+=10;
test();
}
function blueDown()
{
((bo-10) < 0) ? bo=0 : bo-=10;
test();
}

</script>
</head>
<bodY onload="test()">
<script type="text/javascript">
test();
</script>
<div id="divTest"></div>
<button onclick="redUp()">Red Up</button>
<button onclick="redDown()">Red Down</button>
<button onclick="greenUp()">Green Up</button>
<button onclick="greenDown()">Green Down</button>
<button onclick="blueUp()">Blue Up</button>
<button onclick="blueDown()">Blue Down</button>
Selected Color:<input type="text" id="inTest">
</body>
</html>

Obviously you probably want to use something other than buttons so that the color can change faster and overall it is pretty inefficient, but hopefully you get the idea. You just click anywhere on the color gradient and it returns the hex value of that color.

andrewgarn · July 26, 2008

Oh very nice, a colour gradient is what I need

There are other selection options on the page, so will it submit straight away or just change value somewhere?

also this will fail if javascript is off? - i noticed that you script doesnt do anything, what do I need to add to output colour?

PC Nerd · July 26, 2008

yes itll fail if javascript is off.

If you want anythign where it changes ehpage - or adds values to a list, or chooses between a text field or dropdown... then youll need javascript.

i use the following colour chart code. the image it links to simply creates a png image of x,y size, with background as color.

<?php
$colors = Array();

$colors[] = "000000"; //black
$colors[] = "444444"; //grey
$colors[] = "888888"; //grey
$colors[] = "bbbbbb"; //grey
$colors[] = "ffffff"; //white
$colors[] = "ff0000"; //red
$colors[] = "ffaa00"; //orange
$colors[] = "ffff00"; //yellow
$colors[] = "33ccff"; //sky blue
$colors[] = "0000ff"; //dark blue
$colors[] = "9922ff"; //purple
$colors[] = "33ff00"; //green
$colors[] = "338800"; //dark olive green
$colors[] = "662200"; //brown
$colors[] = "ff00ff"; //pink
$cols = 5;
$column = 1;
echo "<table id = 'colorChart' style = 'display: none;'>\n";
foreach($colors as $value) {
if($column == 1) {
	echo "<tr>";
}
echo "<td><a href = '#' onClick = 'bbCode(\"C".$value."\");'><img src = '".$_USER['doc_root']."widgets/color.php?x=20&y=20&background=".$value."' /></a></td>\n";
if($column == 5) {
	echo "</tr>";
	$column = 1;
}
else {
	$column ++;
}
}
echo "</table>\n";

?>

the function bbcode adds " [ color = <chosen color>] ~ [/ color ] " around the selected text - and its also live (well still working on that)........ - but you get the idea.

gdlk

lemmin · July 28, 2008

My code changes the value of the inTest input box when the user clicks on any color so all you have to do is put form tags around it:

<form id="frmTest">
Selected Color:<input type="text" id="inTest">
<input type="submit">
</form>

Of course, after you do that, the inTest object no longer belongs directly to the document so you probably have to use frmTest.inTest.value in the javascript that sets the innerHTML.

Good luck!

Sign In

Best way for user to select a colour

Recommended Posts

andrewgarn

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

lemmin

Link to comment

Share on other sites

andrewgarn

Link to comment

Share on other sites

PC Nerd

Link to comment

Share on other sites

lemmin

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information