Crear paletas de color originales

Por Celia Espada García @ElPerrodePapel


El color. Elemento clave para nuestros diseños ¿verdad? En una entrada anterior te hablé de la web que uso para extraer paletas de color de una fotografía. Muy útil cuando tienes claro que colores quieres usar pero no conoces su código HEX, que es el que se usa, por ejemplo, en Blogger. Es una de mis webs de cabecera a la hora de diseñar, junto a la que quiero presentarte hoy.
Color Scheme Designer
En este caso, la web que te acabo de enlazar, lo que hace es ofrecerte paletas de color según las opciones que elijas. Vamos a ver un ejemplo ¿vale? Pero ya te digo que es muy sencilla de manejar, su panel de administración es bastante intuitivo aunque esté en inglés y no controles mucho ese idioma. 
¿Preparado para crear tu propia paleta de color?

Mono: nos ofrece una selección de colores de la misma gama según el color base que hayamos seleccionado con el ratón de la rueda. Pasando el ratón por encima de cada cuadrado, podemos ver el código de color, pero hay una forma más sencilla para copiarlo directamente una vez hayamos conseguido la gama deseada.
En la pestaña inferior Adjust Scheme, podemos elegir con mayor precisión el brillo, saturación y contraste.

Dentro de esta misma pestaña, en Adjust Variants, podemos modificar alguno de los colores primarios que nos ha ofrecido la web en nuestra primera selección.

Y en la última pestaña inferior: Color List, podemos copiar fácilmente los diferentes códigos de color para usarlos en nuestro diseño.

Sencillo ¿verdad? Pues aún hay más. La propia web, debajo del cuadro de colores elegidos, nos ofrece dos posibles vistas previas de como quedaría una web diseñada con esa gama de colores.

Podemos pasar de una vista a otra directamente desde la ventana emergente que se abre al pinchar en cualquiera de las dos opciones.

¡Pero hay muchas más opciones para crear nuestra propia paleta de color!
Complement: Colores complementarios.

Al ir girando la ruleta, la web nos ofrece el color elegido más su color complementario. El uso de colores complementarios en diseño hace que unos elementos destaquen sobre otros y haya un mayor contraste. Un diseño con colores complementarios queda bastante más equilibrado que otro realizado con colores de una misma familia de color.
Las opciones de ajuste son las mismas. Y sin seleccionas cualquiera de las vistas previas de ejemplo, puedes ver como la misma web te aconseja usar ese color complementario para destacar el elemento que te interese que sea visitado.

Triad: Triada de color. Elegimos un color base y la web nos "dibuja" un triángulo  entre nuestro color base y dos complementarios.

El color elegido se usa como base y los dos complementarios, para destacar la información de interés.

Tetrad: Dobles colores complementarios. Mientras movemos uno de los círculos de la rueda de color, los otros tres se mueven automáticamente ofreciéndonos los colores complementarios en forma de equis. Nosotros elegimos el color predominante y la web se encarga de combinarlo con los otros tres siguiendo este esquema.

Los resultados pueden ser muy interesantes.

Analogic: tres colores análogos. Elegimos el color base y la web nos ofrece los "colores vecinos", aquellos dos que están a ambos lados del que marcamos como principal.

Podemos modificar los colores análogos directamente desde la rueda, tirando de uno de ellos hasta seleccionar el que nos interese. El otro "color vecino" variará automáticamente.

En los ejemplos, podemos hacernos una idea de cómo podemos combinarlos, aunque siempre la elección final será nuestra.

Y la última opción, para los más coloristas.  Accented Analogic: elegimos nuestro color base y la web nos muestra el complementario y sus dos "colores vecinos".


Una vez hayas elegido tu combinación ideal, solo tienes que ir a la opción Color List, copiar los códigos... ¡y dejar volar tu imaginación!

¿Conocías esta web para crear paletas de color? ¿O usas otra? Puedes dejarme tu opinión y experiencia en comentarios, es muy enriquecedor compartir experiencias y aprender unos de otros.



¿Nos vemos por las Redes Sociales?

El Perro de Papel: Diseño ... on Bloglovin">El Perro de Papel: Diseño ... on Bloglovin">El Perro de Papel: Diseño ... on Bloglovin">

Seguir a @ElPerrodePapel


¿Te ha gustado la entrada? ¡Compártela!