Imagen para un indicador por colores tipo semáforo

Resulta que necesitaba una imagen la cual su color indicara el estado de un "objeto", algo así como un semáforo, pero de más de un 3 valores, de hecho el catálogo de colores estaría en una base de datos.

El chiste es que pre-hacer una imagen por cada color que se definida en la base es inviable, pensé en hacer gala de mis conocimientos de la librería php GD
y tal vez crear imágenes "al vuelo" del color que necesitaba pero, esto traducido a el tiempo en que se generan y envían al cliente es demasiado, se me ocurrió la idea de hacer una imagen transparente y cuyo fondo fuera el que cambiara con estilos y javascript, y el color vendría en el response de una llamada ajax, resultado: algo mucho más interactivo.

A continuación el efecto de la misma imagen con distintos colores de fondo, un tip adicional: usar grises con opacidad inferior al 50% para dar el efecto de sombra.

También vean como uso la propiedad style.backgroundColor='red' de la imagen, para cambiarle el fondo.