Para fazer o exemplo dessa página foi usado um simples seletor de cores baseado em jQuery.
Em primeiro lugar baixar o plugin. Clicar em download it. Salvar no diretório escolhido. Esse exemplo foi salvo em js, plugins, jquery.minicolor e jquery.minicolors.css, para o estilo css. Depois, js, plugins, jquery.minicolor, jquery.minicolors.min.js, para o arquivo de script. Não esquecer da biblioteca jquery: js/jquery-1.10.2.js. Veja o código abaixo, nessa mesma página. Baixar: jquery minicolors
O RGB (Red, Green e Blue – ou Vermelho, Verde e Azul) é um sistema de cores aditivo projetado para ser utilizado em dispositivos eletrônicos. Monitores são pretos e iluminados por pontos de luz. Portanto parte-se da ausência de cor e soma-se pontos de luz vermelhos, verdes e azuis até chegar na cor desejada.
As cores hexadecimais são sequências numéricas que representam cores formadas a partir de uma combinações de 6 caracteres precedidos de uma hashtag. Os códigos hexadecimais são compostos através de uma combinação de três conjuntos de pares formados a partir de números de 0 a 9 e letras de A a F. Quanto mais alto o número mais clara é a cor e quanto mais baixo o número mais escura. A sequência #000000 é o preto. Se o código for composto de pares que se repetem como no caso de #444444, por exemplo, é possível utilizar a formula abreviada #444. O simbolo # serve apenas para informar que se trata de um código hexadecimal.
Tabela de CoresA missão do Brandcolors é justamente servir como um catálogo de cores dos gigantes da internet. Além de ser útil para descobrir rapidamente as cores de marcas famosas, a ferramenta é um bom panorama de quais são os tons mais utilizados na rede.
A biblioteca jQuery possui diversos plug-ins que facilitam e muito a vida dos desenvolvedores
Color Picker (jquery)
(O Código abaixo está pronto para uso)
<html>
<head>
<title>JQuery Plugins - Selecionador de Cores</title>
<script type= "text/javascript" src= "/js/jquery-1.10.2.js"></script>
<script type= "text/javascript" src= "js/plugins/jquery.minicolor/jquery.minicolors.css">
</script>
<script type= "text/javascript" src= "js/plugins/jquery.minicolor/jquery.minicolors.min.js">
</script>
<script>
$(function(){
$("#cor").minicolors();
});
</script>
</head>
<body> No Html: </input type="text" id="cor" /> </body> </html>