Hola.
Esto es muy sencillo.
Como no se como tienes estructurado en codigo los colores he realizado un ejemplo.
Código HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.color { display:inline-block; width:20px; height:20px; cursor:pointer;}
.azul { background-color:blue;}
.rosa { background-color:pink;}
.rojo { background-color:red;}
.negro { background-color:black;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div class="color azul" id="azul" data-cl="azul"></div>
<div class="color rosa" id="rosa" data-cl="rosa"></div>
<div class="color rojo" id="rojo" data-cl="rojo"></div>
<div class="color negro" id="negro" data-cl="negro"></div>
<div style="clear:both"></div>
Recibo por id <input id="porid" value=""><br>
Recibo por data <input id="pordata" value="">
<script>
$('.color').click(function(){
var valor = $(this).attr('id');
var volar = $(this).data('cl');
$('#porid').attr('value',valor);
$('#pordata').attr('value',volar);
});
</script>
</body>
</html> Tienes dos opciones, elije la que más te guste.
OPCION A: recibir el dato por el ID
OPCION B: recibir el dato por DATA
Ejecuta lo que te he pasado y veras lo sencillo que es.