Paint

<!DOCTYPE html>
<html>
<head>
	<title>Pintar</title>
<style type="text/css">
	table{
		margin: auto;
	}
	td,tr{
		border: 1px solid black;
	}
	td{
		width: 100px;
		height: 50px;
	}
	div{
		float: left;
	}
	form{
		float: left;
	}

</style>
</head>
<body>
	<div>
		<table>
			<tr>
				<td id="a1" onclick="cor('a1')">&nbsp;</td>
				<td id="a2" onclick="cor('a2')">&nbsp;</td>
				<td id="a3" onclick="cor('a3')">&nbsp;</td>
				<td id="a4" onclick="cor('a4')">&nbsp;</td>
				<td id="a5" onclick="cor('a5')">&nbsp;</td>
				<td id="a6" onclick="cor('a6')">&nbsp;</td>
				<td id="a7" onclick="cor('a7')">&nbsp;</td>
				<td id="a8" onclick="cor('a8')">&nbsp;</td>
				<td id="a9" onclick="cor('a9')">&nbsp;</td>
				<td id="a10" onclick="cor('a10')">&nbsp;</td>
			</tr>
			<tr>
				<td id="a11" onclick="cor('a11')">&nbsp;</td>
				<td id="a12" onclick="cor('a12')">&nbsp;</td>
				<td id="a13" onclick="cor('a13')">&nbsp;</td>
				<td id="a14" onclick="cor('a14')">&nbsp;</td>
				<td id="a15" onclick="cor('a15')">&nbsp;</td>
				<td id="a16" onclick="cor('a16')">&nbsp;</td>
				<td id="a17" onclick="cor('a17')">&nbsp;</td>
				<td id="a18" onclick="cor('a18')">&nbsp;</td>
				<td id="a19" onclick="cor('a19')">&nbsp;</td>
				<td id="a20" onclick="cor('a20')">&nbsp;</td>
			</tr>
			<tr>
				<td id="a21" onclick="cor('a21')">&nbsp;</td>
				<td id="a22" onclick="cor('a22')">&nbsp;</td>
				<td id="a23" onclick="cor('a23')">&nbsp;</td>
				<td id="a24" onclick="cor('a24')">&nbsp;</td>

				<td id="a25" onclick="cor('a25')">&nbsp;</td>
				<td id="a26" onclick="cor('a26')">&nbsp;</td>
				<td id="a27" onclick="cor('a27')">&nbsp;</td>

				<td id="a28" onclick="cor('a28')">&nbsp;</td>
				<td id="a29" onclick="cor('a29')">&nbsp;</td>
				<td id="a30" onclick="cor('a30')">&nbsp;</td>
			</tr>
			<tr>
				<td id="a31" onclick="cor('a31')">&nbsp;</td>
				<td id="a32" onclick="cor('a32')">&nbsp;</td>
				<td id="a33" onclick="cor('a33')">&nbsp;</td>
				<td id="a34" onclick="cor('a34')">&nbsp;</td>
				<td id="a35" onclick="cor('a35')">&nbsp;</td>
				<td id="a36" onclick="cor('a36')">&nbsp;</td>
				<td id="a37" onclick="cor('a37')">&nbsp;</td>
				<td id="a38" onclick="cor('a38')">&nbsp;</td>
				<td id="a39" onclick="cor('a39')">&nbsp;</td>
				<td id="a40" onclick="cor('a40')">&nbsp;</td>

			</tr>
			<tr>
				<td id="a41" onclick="cor('a41')">&nbsp;</td>
				<td id="a42" onclick="cor('a42')">&nbsp;</td>
				<td id="a43" onclick="cor('a43')">&nbsp;</td>
				<td id="a44" onclick="cor('a44')">&nbsp;</td>
				<td id="a45" onclick="cor('a45')">&nbsp;</td>
				<td id="a46" onclick="cor('a46')">&nbsp;</td>
				<td id="a47" onclick="cor('a47')">&nbsp;</td>
				<td id="a48" onclick="cor('a48')">&nbsp;</td>
				<td id="a49" onclick="cor('a49')">&nbsp;</td>
				<td id="a50" onclick="cor('a50')">&nbsp;</td>
			</tr>
		</table>
	</div>
	<form><br>
		<br><br><br>
		<input type="color" name="cor" id="cores"><br><br><br>
		<input type="color" name="cor" id="cor"><br><br><br><br>
		<input type="button" name="botao" value="Limpar" onclick="limpa()"><br>

	</form>


	<script type="text/javascript">
		function cor(x){
			document.getElementById(x).style="background-color:" + document.getElementById('cores').value;
		}
		function limpa(){
		for(i=1;i<=50;i++)
			{
				document.getElementById('a' + i).style="background-color:" + document.getElementById('cor').value;
			}

		}

	</script>
</body>
</html>