Color

Color Picker - jQuery plugin

colorpicker23.jpg

Color Picker - jQuery plugin, un simple componente para seleccionar el color de la misma manera que sueles hacerlo en Adobe Photoshop. Sin duda vendrá muy bien para montarlo en alguna aplicación web en la cual trabajes.

Ver demo - Mas info y descarga Color Picker - jQuery plugin

Instalacion:
Realizamos las llamadas correspondientes desde nuestro encebado, copiando y pegando el siguiente código dentro de nuestra etiqueta < head >

JavaScript:
  1. <script type="text/javascript" src="js/jquery.js"></script>
  2.     <script type="text/javascript" src="js/colorpicker.js"></script>
  3.     <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />

y agregamos al contenido nuestro selector de colores de esta forma.

HTML:
  1. <p id="colorpickerHolder">
  2.                 </p>

Color palette - Aplicar diferentes grados de opacidad a tus colores bases

colorpaletesteee.jpg

Color palette, una simple Herramienta online que nos permite crear una paleta de colores con 10 tonos bases, y a partir de ellos jugar con diversos grados de opacidad. La fila superior emula la opacidad en un fondo blanco, y la siguiente sobre un fondo negro.
La opacidad en la fila superior va desde un valor 100% opaco, al 75%, 50%, 25% hasta llegar al 10%. La fila inferior se inicia en un 85% en lugar del 100%, llegando hasta un tono realmente oscuro. Podremos configurar cada opción como deseemos, o añadir el color base que más nos agrade. Pero si aun no se deciden por cual, basta jugar con el botón “Random Base” para que nos vaya generando diferentes paletas de colores de forma automática. Además, podremos obtener un Link permanente a la gamas que hemos creado o mas nos ha gustado.

Enlace Color palette

ColorToy 2.0 - Ayudándote a encontrar la combinación de colores adecuada

colortoy.jpg

ColorToy 2.0, es una aplicación que nos puede ayudar a encontrar una combinación de colores adecuada, cuando nuestras inspiración esta un poco nula. Aunque siempre partiendo de una base. Es decir, tienes una idea o un color especifico que deseas utilizar en un proyecto, pero en el momento que deseas comenzar a diseñar, te encuentras que no sabes bien aun, como combinar ese color que tanto te ha gustado. Es aquí donde ColorToy puedes sernos útil, Tan solo debemos ingresar el valor Hexadecimal del tono que nos a agradado, y partiendo de esa base, ColorToy nos arrojara una serie de paletas de colores, con tonos que podríamos usar para combinar o seguir una misma gama.

Enlace ColorToy 2.0

Via wwwhatsnew

MooRainbow - Crear nuestro propio selector de colores

rainbow.jpg

MooRainbow un poderoso Javascript utilizando también mootools que nos permitirá montar en nuestra Web, un bonito selector de colores, donde podremos visualizar y elegir aquellos colores que serán útiles para nuestros proyectos. Inclusive permite una personalización realmente muy fácil, y brinda agradables variantes a la hora de ser utilizado.

  • MooRainbow es completamente personalizable a través de un fichero CSS.
  • MooRainbow mantiene limpio su DOM y genera XHTML y CSS válido
  • MooRainbow proporciona, como contrapartida, un objeto que contiene RGB, HSB y HEX del color seleccionado.
  • MooRainbow es realmente rápido gracias a mootools.
  • MooRainbow funciona bien en Firefox / Safari / Opera / IE

Ver demo - Descarga Demo - Mas info moorainbow

Instalacion:
Descargamos los archivos a utilizar (mi demo incluye todo) y realizamos la llamada correspondiente a ellos desde nuestro encabezado.

JavaScript:
  1. <script type="text/javascript" src="js/mootools-release.js"></script>
  2. <script type="text/javascript" src="js/mooRainbow.js"></script>

Incluyendo también el llamado a la hoja de estilo

HTML:
  1. <link type="text/css" rel="stylesheet" href="mooRainbow.css">

Ahora debemos crear un nuevo objeto MooRainbow. Lo haremos dentro de nuestra etiqueta < head >

JavaScript:
  1. <script type="text/javascript">
  2.     window.addEvent('domready', function() {
  3.     var r = new MooRainbow('myRainbow', {
  4.         'startColor': [58, 142, 246],
  5.         'onChange': function(color) {
  6.             $('myInput').value = color.hex;
  7.         }
  8.     });
  9. });
  10.  
  11. </script>

Para finalizar, ya podremos insertar nuestra estructura en body. O mejor dicho nuestro selector de colores MooRainbow, donde deseamos mostrarlo en nuestra web. La forma de hacerlo:

HTML:
  1.     <img id="myRainbow" src="images/rainbow.png" alt="[r]" width="16" height="16" />
  2.     <input id="myInput" name="myInput" type="text" size="13" />
  3. </label>

Este selector que acabamos de insertar aquí, es algo así como su versión estándar. En mi demo, seria el ejemplo numero UNO. Una pequeña imagen, que al hacer clic sobre ella abrirá nuestro selector de colores, y un casillero que almacenara los valores Hexadecimal de cada color que hemos seleccionado.
Pero MooRainbow posee otras variantes, u otra forma de utilizar nuestro selector. Me remitiré solo ha comentar los demos que he creado. Lo que seria el ejemplo DOS de mi demo. Básicamente, una imagen que nuevamente abrirá nuestro selector de colores (pro cierto, esta vez mucho mas pequeño), pero evitando almacenar en un casillero los valores hexadeciamles generados al seleccionar cada color. Lo que significa, que si deseamos un color o el valor de un tono, lo obtendremos directamente copiándolo desde el mismo selector, ya que posteriormente no quedara almacenados en ningún casillero. De todas sigue siendo muy útil, al acostumbrarnos, y es otra buena opción, dependiendo el fin que deseamos darle a cada uno de estos selectores en cuestión.
Instalacion ejemplo DOS:
Si bien al comienzo hemos realizado la llamada a un fichero css, esta vez necesitaremos insertar unas líneas más de css para este demo. El código lo encontraran aquí.
Una vez agregado las líneas de código css nuevas, nuevamente necesitaremos crear un objeto desde nuestro encabezado. Dentro de nuestra etiqueta < Head >

JavaScript:
  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3. var demo3 = new MooRainbow('demo3', {
  4.     id: 'myDemo3',
  5.     imgPath: 'images/'
  6.     });
  7. });
  8. </script>

y por ultimo, la imagen que abrirá nuestro selector de colores en nuestro contenido

HTML:
  1.     <img id="demo3" src="images/rainbow.png" rainbow.png" alt="[r]" width="16" height="16" class="rain" id="demo3" />
  2.     Click en el arco iris para abrir la paleta de colores miniatura
  3. </label>

De todas formas, podrán ver y probar desde el demo a descargar

mooColorFinder - Obtener los colores de una web

moocolorfinder.jpg

mooColorFinder, una simple herramienta online que nos permite extraer los colores que componen a una Web. Tan simple de utilizar, que solo debemos ingresar la URL de una Web para que mooColorFinder comience a exponernos en una completa paleta de colores cada tono utilizado en el proyecto online.

Enlace mooColorFinder

Via isopixel

COPASO - Generar, editar, y guardar paletas de colores

copaso.jpg

COPASO en una nueva herramienta online presentada en Colourlovers. COPASO Básicamente nos permitirá editar o mejor dicho generar nuestras propias paletas de colores en simples pasos y bajo un entorno muy agradable. Tan simple como ir arrastrando nuestro ratón por el casillero de los tonos, e ir guardándolos uno a uno en un recuadro destinado a ello. COPASO automáticamente nos generara los códigos HEX, RGB y demás de ese color en particular, y cada una de las paletas generadas por nosotros podrán ser guardadas, para en el futuro volver a editarlas. Si acostumbras a usar una aplicación en tu ordenador para este tipo de cosas, y de la cual estas conforme, COPASO posee una ventaja. Cuando debas formatear tu disco duro, tus paletas de colores están muy bien guardas en tu cuenta online bajo COPASO y podrás acceder a ellas vayas a donde vayas, y suceda lo que suceda en tu ordenador.

Enlace COPASO

Via Cosas Sencillas

Mas de 500 colores en Hexadecimal, valor RGB y codigo Access

colors2.jpg

cloford, en esta página se muestran más 500 colores con su correspondientes nombres, valor Hexadecimal, valor RGB y el valor numérico para utilizarlos en Microsoft Access en caso de necesitarlos. Este recurso será realmente útil, por un lado para conocer las diferentes gamas de un color específico, y por el otro, para saber como llegar a un color especifico, sin importar el proyecto en el cual estemos trabajando.

CSS:
  1. En Hexadecimal
  2. p {
  3. color: #B0171F;
  4. }
  5. En RGB
  6.  
  7. p { rgb(176, 23, 31); }

Wearpalettes - Mas de 1500 paletas de colores

wearpallets.jpg

Wearpalettes es un blog que al igual que colourlovers nos ofrece una variedad bastante amplia de paletas de colores inspiradas sobre diversas fotografías, un recurso que siempre suele ser muy útil, cuando no sabes aun que tono llevara uno de tus proyectos. Wearpalettes no posee la inmensa cantidad que caracteriza a colourlovers, pero posee más de 1500 combinaciones de colores de cuales podrás sacar provecho y las cuales encontraremos divididas por categorías.

Enlace Wearpalettes

Gracias Sofia.

Colourlovers Rediseñado, y con 321.712 paletas de colores y 3.037 Patterns

colourlovers.jpg

Colourlovers es sin duda la visita obligada de todo diseñador. Sea este un diseñador grafico, un diseñador web, un diseñador de interiores, etc.
Si de alguna forma te relacionas con el diseño, dudo que no lo conozcas, pero de ser así, basta resumir que Colourlovers es el sitio ideal a visitar cuando no encuentras la inspiración para combinar todos tus colores y los que evidentemente, formaran parte de tu proyecto.
La cantidad de combinaciones de colores y de patterns que nos ofrece Colourlovers, hacen que desde el primer día que lo conoces, te termines enamorando.
Esta última semana Colourlovers ha sido rediseñado completamente. Básicamente respetando un poco el diseño original. Quizás con un poco de tonos mas oscuros pero siguiendo la misma línea. El cambio ha sido realmente muy positivo, basta que lo verifiquen con sus ojos.
Un dato curioso: Colourlovers nos ofrece ya 654.220 colores en 321.712 paletas combinadas. Y ya se han creado 3.037 Patterns que podremos descargar de forma gratuita y en formatos diferentes. Ahora dime ¿Cómo no enamorarse?

Pixel Pick - Capturador de colores

Pixel Pick es una herramienta de selección de color gratuita que obtiene el color de los píxeles bajo el cursor de su ratón y lo traduce a valores de colores tales como RGB, CMYK, HSB, HEX, etc. Capturar los colores de todo lo que se encuentre en nuestro escritorio es realmente fácil, simplemente basta con llevar nuestro ratón hacia el elemento a capturar, y dejar que Pixel Pick haga el resto. Enlace Descarga Pixel Pick

Nota: para ir capturando los colores utilizamos la combinación de teclas Ctrl. + G